如何在Angular中手动设置自定义验证器

Question

我想在组件中将我的自定义验证程序“ validateName”手动设置为 true ，以显示以下错误消息：

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

用户应输入名称，然后单击一个按钮。此后，在后台验证名称（输入）。如果找不到名称，则需要显示错误消息。

有没有办法做到这一点？不幸的是我没有找到任何解决方案。

Answer 1

您可以做的是在component.html上为*ngIf添加另一个条件：

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

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

在您的component.ts上，单击按钮时，将触发submitForm方法，如果出现isSubmitted错误，则会将validateName切换为true。

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