Angular 注入提供者的异步表单验证

Question

我有一个反应形式的自定义异步验证器，需要调用服务来验证名称是否唯一。

由于验证器是纯函数，因此似乎没有很好的方法来注入 HTTP 等提供程序来进行这些调用。

我目前拥有的代码正在返回一个传递服务的函数，但这感觉有点老套...

export function nameValidator(platformService: PlatformService): ValidatorFn {
    return (control: FormControl): { [key: string]: any } => {
        return userService.getUnique(control.value)
    };
}

我的问题有没有更好的方法？

Answer 1

验证器在模板中用作指令时可以注入directive classes。

当它们直接在 FormControl 或 FormBuilder

中指定时，它们应该是函数

为了使用 DI，它们应该是 useFactory 或 useClass 提供者并注入到组件中：

@Injectable()
class NameValidator implements AsyncValidator {
  constructor(private userService: UserService) {}

  validate = (control: FormControl) => this.userService.getUnique(control.value);
}

...

new FormControl('', nameValidator.validate);

请注意，validate 方法作为回调传递，应该是箭头或绑定到 class 实例 bind。

Angular 注入提供者的异步表单验证

Angular Async Form Validation with Injected Providers

typescript

angular

angular-reactive-forms