Как сделать так, чтобы угловые реактивные формы могли устанавливать значение для переключателя?

Question

Моя угловая реактивная форма не может установить состояние пользовательского интерфейса переключателя, я пытаюсь загрузить исходное состояние для функции "сохраненного поиска" приложения

Я использую угловой7 и угловой материал

//declaration
    this.filterForm = new FormGroup({
      heating: new FormControl('1'),
    });

//loadSearch fuction
  this.filterForm.setValue(valueObject);

  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="heating-1" >
          <input formControlName="heating" id="heating-1" type="radio" name="heating" (change)="onFilterCheckChange($event,'heating')" class="mdl-radio__button"  [value]=1 checked>
          <span class="mdl-radio__label">Si</span>
        </label>
        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="heating-2" >
          <input formControlName="heating" id="heating-2"  type="radio" name="heating" (change)="onFilterCheckChange($event,'heating')" class="mdl-radio__button"  [value]=0 >
          <span class="mdl-radio__label">No</span>
        </label>

Ожидаемый результат заключается в том, что пользовательский интерфейс формы обновляется при вызове .setValue в функции loadSearch, фактический результат заключается в том, что с пользовательским интерфейсом ничего не происходит (кроме объекта formControlимеет правильное значение)

Answer 1

По сути, у вас есть два способа:

Вы можете : установить значение для всей формы: так что ваш valueObject переопределит значение, указанное в объявлении, и, еслиединственное поле формы было heating, у вас было бы что-то вроде этого:

this.filterForm.setValue({
  heating: '0' // or 1
});

или : установите значение только для поля heating:

this.filterForm.controls.heating.setValue('0');

Также, пожалуйста, убедитесь, что типы значений радио совпадают с данными, которые вы инициализируете и устанавливаете, чтобы вы могли использовать строковый тип во входных данных, а также избавиться от свойства selected.

Hopeэто помогает!