Угловые setValidators (Validators.required) не изменяют пустой элемент управления, чтобы быть недействительным - PullRequest
Новая
       20

Угловые setValidators (Validators.required) не изменяют пустой элемент управления, чтобы быть недействительным

0 голосов
/ 20 мая 2019

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

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

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

Смотрите ниже, как мне этого достичь.

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

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

ts сторона: 

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

}

ngOnInit (): void {

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