Ant-Design and Angular Reactive Forms Validation - nzErrorTip set,but Validation message missing

Question

Validation only colors the input text in red but doesn't seem to show the nzErrorTip message set in the nz-form-control control.

see code bellow:

<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>

Doesn't display validation message set in 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;
  }

Expected results are to display the message stated in the nzErrorTip as described in the documentation

Answer 1

You should update your ant-zorro to version 8.0!

When it's 7.5x , like this

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