отключить реактивную форму выбрать элемент управления формой в массиве форм

Я пытаюсь отключить элемент управления формой выбора, проверяя условие в реактивной форме, и мне не удалось сделать это динамически в моем компоненте формы. Интересно, делал ли кто-нибудь это раньше?

let control = <FormArray>this.scheduleForm.controls.schedulingAvailability;
this.scheduleObj.schedulingAvailability.forEach(x => {
  control.push(this.formBuilder.group({
    day: x.day,
    startTime: x.startTime,
    status: x.status
  }))
  if(x.status) {
    this.scheduleForm.get('x.startTime').enable();
  } else {
    this.scheduleForm.get('x.startTime').disable();
  }
})

И в моем компоненте я настроил его следующим образом

<div formArrayName="schedulingAvailability">
    <div *ngFor="let d of scheduleForm.controls.schedulingAvailability.controls; let i=index">
        <div formGroupName="{{i}}">
            <div class="row">
                <div class="col-md-1">
                    <label class="checkbox">
                        <input type="checkbox" formControlName="status">
                        <span class="checkbox__input"></span>
                        <span class="checkbox__label">{{ scheduleObj.schedulingAvailability[i].day }}</span>
                    </label>
                </div>
            <div class="col-md-2">
                <div class="form-group__text select">
                    <select formControlName="startTime">

angular angular-reactive-forms angular-forms formarray form-control
person David Jeyathilak    schedule 16.01.2018    source источник
comment
В чем именно проблема? Что значит I could not do it dynamically in my form component.?   -  person AJT82    schedule 17.01.2018
comment
Извините, Алекс, это сообщение об ошибке - core.es5.js: 1020 ERROR TypeError: невозможно прочитать свойство disable для null   -  person David Jeyathilak    schedule 17.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

Нет такой переменной, как this.scheduleForm.get('x.startTime'). startTime присутствует в виде массива schedulingAvailability. Итак, что вам нужно для доступа к этому текущему индексу formarray в вашей итерации. Итак, что бы вы сделали, это вместо этого заменить forEach на цикл for, чтобы мы могли удерживать текущий индекс итерации:

let control = <FormArray>this.scheduleForm.controls.schedulingAvailability;

for (let i = 0; i < this.scheduleObj.schedulingAvailability.length; i++) {
  control.push(this.formBuilder.group({
    status: this.scheduleObj.schedulingAvailability[i].status,
    startTime: this.scheduleObj.schedulingAvailability[i].startTime
  }))

  // access the current formgroup of your formarray
  let fg = control.get([i])
  if (fg.get('status').value) {
    fg.get('startTime').enable();
  } else {
    fg.get('startTime').disable();
  }
}

StackBlitz

Изменить: поскольку значение можно отключить, нам нужно помнить, что оно не входит в значения формы. Поэтому, если вы хотите получить и отключенные значения, используйте this.scheduleForm.getRawValue()

person AJT82    schedule 18.01.2018