В основном у меня есть массив массива inputGroups, я использую ng-Zorro (antd Angular) и пытаюсь проверить мою inputGroup и отобразить сообщения об ошибках В соответствии с тем, какой элемент управления неправильный : Вот Шаблон формы:
<form nz-form [formGroup]="form">
<ng-container formArrayName="clouds">
<nz-form-item *ngFor="let n of getClouds().controls; let ni = index;" [formGroupName]="ni">
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nuages" nzRequired>Cloud {{ni+1}}</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="n.get('height')"
nzErrorTip="Must be three digit number !">
<nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
<ng-template #addOnBeforeTemplate>
<nz-select formControlName="cloud" nzAllowClear style="width: 64px;">
<nz-option nzValue="Cumulus" nzLabel="Cumulus"></nz-option>
<nz-option nzValue="Cirrus" nzLabel="Cirrus"></nz-option>
</nz-select>
</ng-template>
<input nz-input formControlName="height" placeholder="height" style="width: 64px" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
</ng-container>
и файл формы TS:
ngOnInit(): void {
this.form = this.fb.group({
clouds: this.fb.array([this.createCloudControl()])
})
createCloudControl() {
return this.fb.group({
cloud: [, [Validators.required]],
height: ['', [Validators.required, Validators.pattern("^[0-9]{3}$")]],
})
}
Проблема в том, что поле "облако" требуется, но сообщение об ошибке не отображается, если оно не указано. Поле "высота" работает нормально, и отображается сообщение об ошибке. Что я хочу, это , чтобы отобразить сообщение об ошибке. В зависимости от того, какое поле является недействительным
Заранее спасибо