2

基本的に私は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}$")]],
})

}

問題は、「クラウド」フィールドが必要ですが、指定されていない場合にエラー メッセージが表示されないことです。「高さ」フィールドは正常に機能しており、エラー メッセージが表示されています。私が欲しいのは、どのフィールドが無効であるかについてのエラーメッセージを表示することです

前もって感謝します

4

0 に答える 0