Я создал реактивную форму на 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>