初始化时要验证的 Angular 表单字段答案

【问题标题】：Angular form field to be validated when initialized初始化时要验证的 Angular 表单字段
【发布时间】：2019-02-06 14:19:22
【问题描述】：

我已经构建了一个模板驱动的表单，其中包含一个字段表。表的一行中的一个数据项具有这样的“路径名”字段。（这是在 *ngFor 结构中）

      <td>
        <mat-form-field>
          <input #fieldPath="ngModel" type="text" matInput [(ngModel)]="f.pathName"
                 name="pathname{{ row }}"
                 required appPathnameValidator appPathInUseValidator [parentId]="parent.id"
                 placeholder="Path name">
          <mat-error *ngIf="fieldPath.errors?.pattern">Path Name cannot include white space or / character.</mat-error>
          <mat-error *ngIf="fieldPath.errors?.required">Path Name is Required.</mat-error>
          <mat-error *ngIf="fieldPath.errors?.pathInUse">Path Name Is In Use</mat-error>
        </mat-form-field>
      </td>

所以我有一个内置验证器和两个自定义验证器。当用户访问表单控件并离开它时，这些都起作用。但是，表单的初始化方式可能具有未通过验证的起始值。但是当时没有显示 mat-error 元素。

有什么方法可以强制验证这些字段而无需用户访问它们？

【问题讨论】：

文档说：Errors are hidden initially and will be displayed on invalid form fields after the user has interacted with the element or the parent form has been submitted. 所以听起来这就是它的工作方式。你能建立自己的错误处理而不使用mat-error 元素吗？（参考：material.angular.io/components/form-field/…）
您可以创建自定义错误状态匹配器：material.angular.io/components/input/…
@DeborahK 您的链接指向有关该主题的有用规范文本。我没有认为这是一个实质性问题，而不是一个常规的角度问题。
@AJT_82 Oy。这看起来确实是正确的方法

标签： angular

【解决方案1】：

我不使用mat-error，并且可以完全控制消息出现的时间：立即（这是标准角度默认值），仅当字段被触摸时，当字段被修改（脏）时，或任何组合。

  <div class="form-group row mb-2">
    <label class="col-md-2 col-form-label"
           for="firstNameId">First Name</label>
    <div class="col-md-8">
      <input class="form-control"
             id="firstNameId"
             type="text"
             placeholder="First Name (required)"
             required
             minlength="3"
             [(ngModel)]=customer.firstName
             name="firstName"
             #firstNameVar="ngModel"
             [ngClass]="{'is-invalid': (firstNameVar.touched || firstNameVar.dirty) && !firstNameVar.valid }" />
      <span class="invalid-feedback">
        <span *ngIf="firstNameVar.errors?.required">
          Please enter your first name.
        </span>
        <span *ngIf="firstNameVar.errors?.minlength">
          The first name must be longer than 3 characters.
        </span>
      </span>
    </div>
  </div>

在此代码中，如果消息是 touched 或 dirty 而不是 valid，我会显示消息。如果你想立即显示消息，我假设你不想valid。

【讨论】：

【解决方案2】：

DeborahK 提供了我需要的提示，但我将在此处记录我的解决方案，以供任何可能需要它的人使用。

我可以通过 @ViewChild 引用访问表单。在模板中：

  <form #tform="ngForm" >

在组件中：

  @ViewChild('tform') form: NgForm;

现在，在表单构建完成后，我可以像这样遍历所有 FormControl：

    for (const key of Object.keys(this.form.controls)) {
      const control = this.form.controls[key];
      if (!control.valid) control.markAsTouched();
    }

请注意，这些字段已经过验证，因此将设置 valid 属性。但是 markAsTouched 方法的作用是让 mat-error 元素根据结果显示出来。

【讨论】：