如何在 Angular 中创建自定义异步验证器？

Question

我创建了一个后端验证器，我想以如下方式从前端调用它：

  public validate(valueParam: any, fieldName: string): void {
    let fieldToValidate = [
      {
        objectType: "USER",
        type: "String",
        name: fieldName,
        value: valueParam
      }
    ];

    this.userService.validateUser(fieldToValidate).subscribe((response) => {
      console.log(response)
    })
  }

所以验证器应该将两个参数作为输入。 我的页面由很多行组成，每行有四个输入字段：名字、姓氏、email 和电话。 我没有在 ts 文件中使用任何 FormControl 或 FormGroup ，我只有 object 通过 ngModel 绑定到ngModel 。 因此，每个输入字段都通过ngModel处理，如下所示：

<input
   type="text"
   [(ngModel)]="user.email"
   [readonly]="isDisabled"
>

这些输入在ngFor内循环遍历行，并为每一行创建一个输入字段，用于输入姓名、姓氏、email 和电话。

鉴于这种情况，如何在 Angular 中创建自定义异步验证器并将其应用于我的输入字段？

Answer 1

我强烈建议为此使用反应式 forms！

尽管如此：如果您决定使用模板驱动的 forms 您必须创建一个实现AsyncValidator的指令并将其注册到NG_ASYNC_VALIDATORS令牌：

@Directive({
  selector: '[someValidator]',
  providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: SomeAsyncValidatorDirective, multi: true}]
})
export class SomeAsyncValidatorDirective implements AsyncValidator {
  validate(control: AbstractControl): Observable<ValidationErrors | null> {
    // your validation logic
  }
}

由于validate仅将控件作为参数，因此您必须从控件中提取验证所需的信息或通过@Input提供它

@Input('someValidator') fieldName: string;

要应用您的验证器，请将指令添加到输入

<input [(ngModel)]="..." someValidator="fieldIWantToValidate">