如何在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;
  }
}