Моя пользовательская ошибка внутри mat-error не отображается в DOM

Question

Я пытаюсь проверить форму входа в систему и проверить, является ли электронная почта действительной (я хотел бы заблокировать какую-то почту за 10 минут), поэтому наряду с mat-errors для недопустимого шаблона электронной почты я хочу показать ошибку, что электронная почта недействительна или реальный.

У меня есть API для этого, поэтому я отправляю электронное письмо на сервер, и оно возвращает мне ответ true или false. Я пытаюсь отобразить другой mat-error вместо значения по умолчанию, но застрял в этом. Я прочитал о ErrorStateMatchers, но я не нашел, как интегрировать мой API-сервис внутри. Не могли бы вы помочь мне или дать несколько советов, пожалуйста.

Вот мой шаблон html:

<mat-form-field class="form-input">
  <div class="input-wrapper">
    <span class="material-icons">person</span>
    <input matInput class="input" type="email" name="email" (blur)="validateEmail()" formControlName="email"
      [readonly]="disabledForm">
  </div>

  <mat-error class="input-error" *ngIf="loginForm.get('email').touched && formErrorsText['email']" translate>
    {{ formErrorsText['email'] }}
  </mat-error>

  <mat-error class="input-error" *ngIf="!(validEmail$ | async)">
    {{ 'AUTH.LOGIN.INVALID_EMAIL'| translate }}
  </mat-error>
</mat-form-field>

В основном, если я заменю

<mat-error class="input-error" *ngIf="!(validEmail$ | async)">
  {{ 'AUTH.LOGIN.INVALID_EMAIL'| translate }}
</mat-error>

на

<div class="input-error" *ngIf="!(validEmail$ | async)">
  {{ 'AUTH.LOGIN.INVALID_EMAIL'| translate }}
</div>

это было отображено, но я хочу понять, почему я не могу использовать mat-error.

Вот мой apiService

validateEmail(): void {
 if (this.loginForm.valid) {
   this.validEmail$ = this.emailValidationService.checkEmail(this.loginForm.get('email').value)
    .pipe(map(response => !response?.trust_rate || response?.trust_rate < 50));
 }
}

Answer 1

В вашем validateEmail() методе вы можете сделать что-то вроде

validateEmail(): void {
 if (this.loginForm.valid) {
   this.emailValidationService.checkEmail(this.loginForm.get('email').value)
       .subscribe(response => {
         //Apply your checks, if invalid then
         this.loginForm.get('email').setErrors({serverError: 'Your Error'});
       });

И в вашем шаблоне

<mat-error *ngIf="form.get('email').errors?.serverError">
   {{ form.get('email').errors?.serverError }}
</mat-error>

mat-error, похоже, связан со статусом <form-field> оно заключено в и, следовательно, установка ошибки в поле формы правильно помечает поле как грязное.