angular - Ant-Design 和 Angular 反应式表单验证 - nzErrorTip 集，但缺少验证消息

Question

验证仅将输入文本着色为红色，但似乎没有显示控件中设置的 nzErrorTip 消息nz-form-control。

见下面的代码：

<form nz-form [formGroup]="myForm" (ngSubmit)="submitHandler()">
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzRequired nzFor="Name">Name</nz-form-label>
    <nz-form-control [nzSpan]="8" nzErrorTip="Please input your name">
      <input type="text" nz-input formControlName="Name" placeholder="Please input your name" />
    </nz-form-control>
  </nz-form-item>
  <button color="primary" type="submit">Submit Form</button>
</form>

不显示设置的验证消息nzErrorTip

 async submitHandler() {
      for (const i in this.myForm.controls) {
      this.myForm.controls[i].markAsDirty();
      this.myForm.controls[i].updateValueAndValidity();
    }

    this.loading = true;

    const formValue = this.myForm.value;

    try {

    } catch (err) {
      console.error(err);
    }

    this.loading = false;
  }

预期结果是显示 nzErrorTip 中所述的消息，如文档中所述

标签： angularangular-reactive-formsantdangular-forms

Answer 1

您应该将您的 ant-zorro 更新到 8.0 版！

当它是 7.5x 时，像这样

<nz-form-explain *ngIf="validateForm.get('email')?.dirty && validateForm.get('email')?.errors">
    The input is not valid E-mail!
</nz-form-explain>