Angular 表单在使用 ng-zorro 初始化时未显示错误

Question

I have an angular application with reactive forms. I use ng-zorro as UI framework. There is a case that client could open a form, which became invalid during his workflow in the app.

The problem their is that angular marks the form as invalid, but no error messages displayed from ng-zorro until the form control is touched.

function validateEmail(c: FormControl) {
  const URL_REGEX = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;

  return URL_REGEX.test(c.value) ? null : {
    validateEmail: true
  };
}

      <nz-form-item>
        <nz-form-label
          nzXXl="3"
          nzXl="4"
          nzLg="6"
          nzMd="7"
          nzSm="10"
          nzXs="24"
          nzFor="videoLink"
          nzRequired>
          Video Link
        </nz-form-label>
        <nz-form-control
          nzXXl="21"
          nzXl="20"
          nzLg="18"
          nzMd="17"
          nzSm="14"
          nzXs="24"
          nzHasFeedback
          [nzErrorTip]="videoErrorTpl"
        >
          <input nz-input formControlName="videoLink" maxlength="150"/>
          <ng-template #videoErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
               required
              </ng-container>
              <ng-container *ngIf="control.hasError('validateEmail')">
                Please enter a valid URL
              </ng-container>
            </ng-template>
        </nz-form-control>
      </nz-form-item>

Answer 1

If I understood the problem correctly, the root of it is that all fields are marked as pristine. If you need to display errors immediately after starting the form component, try to set the status for all fields to dirty. For example:

ngOnInit(): void {
  for (const key in this.validateForm.controls) {
    this.validateForm.controls[key].markAsDirty();
    this.validateForm.controls[key].updateValueAndValidity();
  }
} 

where validateForm is a model of form