matInput как обработать ошибку на входах по подписке на обмен значения

Question

Я использую Angular 7x и angular материал. У меня есть formGroup, которая имеет только один вход. Я получаю событие изменения значения, когда пользователь печатает, и проверка запускается, но я не получаю визуальную обработку ошибки, пока я не выложу вкладку или страница не потеряет фокус.

Интересно то, что однажды я сделать табуляцию / потерять фокус и вернуться к форме, все работает как ожидалось.

Answer 1

Вы должны делать что-то вроде этого:

<form [formGroup]="userOptionsForm">
  <mat-form-field appearance="outline">
    <mat-label>User Handle</mat-label>
    <div matPrefix>@</div>
    <input matInput 
           formControlName="userHandle"
           minlength="4"
           maxlength="24"
           required>
    <mat-error *ngIf="userOptionsForm?.get('userHandle')?.errors">
      {{getErrorMessage()}}
    </mat-error>
    <mat-hint>Your mixes as authored by...</mat-hint>
  </mat-form-field>
</form>

Одно важное поведение заключается в том, что mat-error не отображается до тех пор, пока ввод не будет затронут. Для этого после создания формы программным способом вы должны сделать следующее:

constructor(_fb: FormBuilder) {
  this.userOptionsForm = _fb.group({
    userHandle: ['', [Validators.required, 
        Validators.minLength(4), Validators.maxLength(24)]]
  });

  this._form.get('userHandle')!.markAsTouched();
}

Stackblitz demo