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