Angular setValidators(Validators.required) не меняет пустой элемент управления на недействительный

Я создал реактивную форму на Angular 6. Внутри формы у меня есть вложенный FormArray. На стороне HTML я инициализирую массив inputs с помощью директивы *ngFor.

Над FormArray у меня есть checkBox formControl. Я хочу, чтобы значение checkBox устанавливало/удаляло Validators.required соответственно.

Обратите внимание, что все входные данные внутри массива элементов управления должны быть обновлены путем изменения флажка.

Смотрите ниже, как я этого добиваюсь.

При установке / снятии флажка входные данные, созданные директивой * ngFor, должны стать красными, если они пусты, поскольку их валидаторы были обновлены, чтобы включить «требуемый» валидатор.

Но проблема в том, что "setValidators(Validators.required)" не вносит никаких изменений в элементы управления. Статус элемента управления остается ДЕЙСТВИТЕЛЬНЫМ, хотя при необходимости он пуст.

ТС сторона:

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>