Angular 7 + Angular Material => 在离开焦点之前不会出现表单验证错误答案

【问题标题】：Angular 7 + Angular Material => Form Validation Error not appearing until leaves focusAngular 7 + Angular Material => 在离开焦点之前不会出现表单验证错误
【发布时间】：2019-04-10 12:27:26
【问题描述】：

<form (ngSubmit)="saveChanges()">
    <mat-form-field appearance="outline" >
      <mat-label>New ID</mat-label>
      <input required matInput name="newName" [style]="elemStyles" [formControl]="email">
      <mat-error *ngIf="email.invalid && (email.dirty || email.touched)">
        <p class="error-message" *ngIf="email.errors.duplicateId">ID <strong>already</strong> exists.</p>
        <p class="error-message" *ngIf="email.errors.required">This field is <strong>required.</strong></p>
      </mat-error>
    </mat-form-field>
    <div class="action-buttons">
      <button type="submit" [disabled]="email.invalid" mat-mini-fab class="accept action-button">
        <mat-icon fontSet="fontawesome" fontIcon="fa-check" class="fa-xs action"></mat-icon>
      </button>
      <button type="submit" mat-mini-fab class="cancel action-button">
        <mat-icon fontSet="fontawesome" fontIcon="fa-times" class="fa-xs action"></mat-icon>
      </button>
    </div>
  </form>

mat-error 部分仅显示 AFTER 离开输入字段的焦点。接受按钮被禁用。任何信息如何解决此行为以在用户键入时获取错误消息？

我也尝试删除 (email.dirty || email.touched)，但它不起作用：/

我的自定义验证器：

export class DuplicateIDValidator {
  static duplicateIDValidator(pageStructure: PageStructureService) {
    return (control: AbstractControl): {[key: string]: any} | null => {
      return pageStructure.pages.every(page => page.questionId !== control.value.toLowerCase()
        || page.questionId === pageStructure.selectedPages[0].questionId) ? null : {duplicateId: true};
    };
  }
}

【问题讨论】：

标签： angular angular-material angular2-form-validation

【解决方案1】：

请注意，直到控件的 touched 标志为真，<mat-error> 才会显示。这意味着在字段的第一个焦点上，然后更改为该字段，任何 <mat-error> 都不会显示，直到该字段模糊（并且 touched 标志设置为 true）。

要强制 <mat-error> 在字段首次获得焦点时显示（并且具有无效值），请将控件标记为已触摸：

this.control.markAsTouched();

【讨论】：

【解决方案2】：

如果您希望立即显示错误而不是在触摸控件时（离开焦点时）显示错误，请将 email.invalid && (email.dirty || email.touched) 替换为 email.invalid

【讨论】：

【解决方案3】：

您可以尝试删除*ngIf 上的第二个条件，即删除(email.dirty || email.touched)

你的代码应该是这样的：

<mat-error *ngIf="email.invalid">
  <p class="error-message" *ngIf="email.errors.duplicateId">ID <strong>already</strong> exists.</p>
  <p class="error-message" *ngIf="email.errors.required">This field is <strong>required.</strong></p>
</mat-error>

一旦出现任何错误，这将导致 mat-error 指令被渲染。

【讨论】：

(email.dirty || email.touched) 是后来添加的，我之前像你说的那样尝试过，它也不起作用
你的FormGroup叫什么名字？另外，您的表单验证器方法是否有效？
我认为是因为我的接受按钮被禁用，但错误消息 mat-error 未被禁用。它与 *ngIf 基本相同。我只使用带有所需验证器的 FormControl 和我在问题中添加的自定义验证器。
当您在 component.ts 上初始化 FormControl 时，您是否通过了这些验证器？像new FormControl(null, [Validators.required, DuplicateIDValidator.duplicateIDValidator]) 这样的东西。此外，您可以尝试在自定义验证器中添加 console.log() 语句来打印您的 FormControl 值？这是为了检查验证器是否被正确触发？
是的，我添加了验证器，并且在自定义验证器中打印了正确的值

【解决方案4】：

解决方案是 ErrorStateMatcher。

【讨论】：