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

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

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

这些输入位于循环行的ngFor内，并为每一行创建一个用于姓名、姓氏、电子邮件和电话的输入字段。

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

Answer 1

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

不过：如果您决定使用模板驱动的表单，则必须创建一个实现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">