Угловой 7 + Угловой материал => Ошибка проверки формы не появляется, пока не исчезнет фокус

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>

Часть ошибки мат показывает только ПОСЛЕ , оставляя фокус поля ввода. Кнопка «Принять» отключается. Любая информация, как исправить это поведение, чтобы получить сообщение об ошибке, пока пользователь печатает?

Я тоже пытался удалить (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

Вы можете попробовать удалить второе условие на *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 2

Решением был ErrorStateMatcher.

Answer 3

Замените email.invalid && (email.dirty || email.touched) на email.invalid, если вы хотите, чтобы ошибка отображалась сразу, а не при касании элемента управления (при выходе из фокуса)