Question

我正在构建一个Angular 2应用程序（2.0），并且我有一个使用servicerecord["dos3"] = ...模块的表单。因此，我在输入字段上使用验证器函数，包括自定义验证器。这很好。

我的问题是我也在尝试在表单字段上使用自定义AsyncValidator。它似乎很直接，但我永远不能在AsyncValidator方法中引用类中的属性。

表单本身的ReactiveForms和FormGroup属性以及输入字段在组件的类中如下所示：

FormControl

form: FormGroup; userName = new FormControl("", [Validators.required], [this.userNameAsyncValidator]);函数中还有FormBuilder将表单附加到ngOnInit()属性。

form

我的问题是，在AsyncValidator中，我无法引用我在组件类中定义的任何服务 - 包括constructor(private fb: FormBuilder, // this.fb comes from here private css: ClientSecurityService) { // this.css comes from here } ngOnInit() { this.form = this.fb.group({ "userName": this.userName } ); }。这是验证器：

this.css

无论我做什么，userNameAsyncValidator(control: FormControl): {[key: string]: any} { return new Promise(resolve => { this.css.getUrl() .subscribe( data => { console.log('Returned http data:', data); resolve(null); }, err => { // Log errors if any console.log(err); }); }); }来电中的this.css都未定义。

（我意识到我的验证器实际上并没有做任何事情 - 我只是希望能够调用我的ClientSecurity服务，这样我最终可以调用远程HTTP Web服务来获取有关userName的响应输入有效且尚未使用。）

Answer 1

您的验证程序未使用您的组件this进行调用。请注意，您传递的是对this.userNameAsyncValidator的宽松引用您可以绑定验证程序而不必担心this冲突，因为角度验证不依赖于this

userName = new FormControl("", [
    Validators.required
], [
    this.userNameAsyncValidator.bind(this)
]);

Angular2自定义表单验证器在类中失去对“this”的访问权限

1 个答案: