基本的に私は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}$")]],
})
}
問題は、「クラウド」フィールドが必要ですが、指定されていない場合にエラー メッセージが表示されないことです。「高さ」フィールドは正常に機能しており、エラー メッセージが表示されています。私が欲しいのは、どのフィールドが無効であるかについてのエラーメッセージを表示することです
前もって感謝します