禁用表单数组中的反应式表单 select 表单控件

Question

我试图通过检查反应式表单中的条件来禁用 select 表单控件，但我无法在我的表单组件中动态执行此操作。想知道以前是否有人这样做过？

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">

Answer 1

没有this.scheduleForm.get('x.startTime')这样的变量。 startTime 存在于 formArray 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()

禁用表单数组中的反应式表单 select 表单控件

disable reactive form select form control in a form array

form-control

angular

angular-reactive-forms

angular-forms

formarray

StackBlitz