Question

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

Answer 1

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

Answer 2

您可以尝试删除*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指令。

Answer 3

解决方案是一个ErrorStateMatcher。

Answer 4

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

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

this.control.markAsTouched();

Angular 7 + Angular Material =>表单验证错误直到焦点消失才出现

4 个答案: