Как установить пользовательский валидатор вручную в Angular

Question

Я хотел бы вручную установить свой собственный валидатор «validateName» в моем компоненте на true , чтобы отобразить следующее сообщение об ошибке:

 <mat-error *ngIf="nameControl.hasError('validateName')">Name not found.</mat-error>

Пользователь должен ввестиимя и нажмите кнопку.После этого имя (вход) проверяется в фоновом режиме.Если имя не найдено, должно появиться сообщение об ошибке.

Есть ли способ добиться этого?К сожалению, я не нашел никакого решения.

Answer 1

Что вы можете сделать, это включить другое условие для вашего *ngIf в ваш component.html:

<mat-error *ngIf="yourForm.controls['nameControl'].hasError('validateName') && isSubmitted">Name not found.</mat-error>

<button (click)="submitForm">submit</button>

А в ваших component.ts, когда нажата кнопка, будет вызван метод submitForm, который переключит isSubmitted в true, если присутствует ошибка validateName.

isSubmitted: boolean = false;
.
.
submitForm() {
  if (this.yourForm.controls['nameControl'].hasError('validateName')) {
    this.isSubmitted = true;
  } else {
    // handle the rest if no error;
  }
}