时间戳

首页 > 解决方案 > Angular 表单在使用 ng-zorro 初始化时未显示错误

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

问题描述

我有一个反应形式的角度应用程序。我使用 ng-zorro 作为 UI 框架。有一种情况是客户可以打开一个表单，该表单在他的应用程序工作流程中变得无效。

他们的问题是 angular 将表单标记为无效，但在触摸表单控件之前不会从 ng-zorro 显示错误消息。

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>

标签： angularangular6angular-reactive-formsng-zorro-antd

解决方案

如果我正确理解了这个问题，那么问题的根源就是所有字段都被标记为原始。如果您需要在启动表单组件后立即显示错误，请尝试将所有字段的状态设置为脏。例如：

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

其中 validateForm 是表单的模型

推荐阅读