Question

我在Angular 6上创建了一个反应式表单。在表单内部，我有一个嵌套的FormArray。在HTML方面，我使用* ngFor指令初始化了输入数组。

在FormArray上方，我有一个复选框formControl。我希望checkBox值分别设置/删除Validators.required。

请注意，控件数组内的所有输入都需要通过复选框的更改来更新。

请参阅下文我如何实现这一目标。

在选中/取消选中复选框时，由* ngFor指令创建的输入在它们为空的情况下应该变为红色-因为其验证器已更新为包括“必需”的验证器。

但是，问题是，似乎“ setValidators（Validators.required）”没有对控件进行任何更改。控件状态保持有效，而在需要时为空。

ts方面：

get UnitFirstMeter() {
return this.configReportForm.get('unitsFirstMeters');

}

ngOnInit（）：无效{

this.configReportForm = this._fb.group({
  reportType: [''],
  reportPeriod: [],
  firstReport: [false],
  unitsFirstMeters: this._fb.array(this.unitsForReport)
});


this.configReportForm.get('firstReport').valueChanges.subscribe(checkedValue => {
  const unitsFirstMeters = this.configReportForm.get('unitsFirstMeters');
  console.log(checkedValue);
  console.log((unitsFirstMeters as FormArray).controls);
  if (checkedValue) {
    (unitsFirstMeters as FormArray).controls.forEach(c => {
      c.setValidators(Validators.required);
      console.log(c.status);
    })
  } else {
    (unitsFirstMeters as FormArray).controls.forEach(c => {
      c.clearValidators();
      console.log(c.status);
    });
  }
  (unitsFirstMeters as FormArray).controls.forEach(c => {
    c.updateValueAndValidity();
  });
});

}

HTML端：

<form class="text-right myFont" [formGroup]="configReportForm">
    <div class="form-group ">
        <label>Rport Type</label>
        <select class="form-control" style="direction:rtl" formControlName="reportType">
            <option value="" style="direction:rtl">בחר את סוג הדו"ח</option>
            <option value="{{type.typeId}}" style="direction:rtl" *ngFor="let type of reportTypes">{{type.typeName}}</option>
        </select>
    </div>

    <div class="form-group">
        <label>Report month and year</label>
        <input type="month" class="form-control" formControlName="reportPeriod">
    </div>

    <div class="form-group">
        <div class="d-flex justify-content-end">
            <label>This is my first report</label>
            <input type="checkbox" formControlName="firstReport" class="ml-2 mt-1">
        </div>
    </div>

    <div formArrayName="unitsFirstMeters">

        <div *ngFor="let unit of unitsForReport; let i = index" class="form-group form-row" >
            <input type="number" class="col-9 text-right form-control" formControlName="{{i}}"
            [class.is-invalid]="UnitFirstMeter.at(i).invalid">
            <label class="col-3 col-form-label">{{unit.unitName}}</label>
        </div>
    </div>

    <button class="btn myFont btn-warning" type="submit">Create</button>
</form>

角setValidators（Validators.required）不会将空控件更改为无效

0 个答案: