如何使用 Reactive Forms (Angular2 RC3) 进行异步验证？

Posted 2023-02-19

【中文标题】如何使用 Reactive Forms (Angular2 RC3) 进行异步验证？

【英文标题】：How to do asynchronous validation with Reactive Forms (Angular2 RC3)?

【发布时间】：2017-01-17 14:10:16

【问题描述】：

我发现这个tutorial 可以进行异步验证。这不再适用于 RC3（Reactive Froms）。

这里怎么做异步验证？

this.username = new FormControl( '', [ <any>Validators.required, <any>ProfileValidator.usernameTaken ]);

...

class ProfileValidator 

 static usernameTaken(control: FormControl): Promise<[key:string]:boolean> 

   let q = new Promise((resolve, reject) => 
     setTimeout(() => 
       resolve(null);
     , 1000)
   );

   return q;
 

FormControl 始终无效...

【问题讨论】：

检查github.com/angular/angular/issues/1068

【参考方案1】：

表单控件的签名应该将异步验证器作为第三个参数，如下所示：

new FormControl( '', 
    [ <any>Validators.required], //sync
    [<any>ProfileValidator.usernameTaken ] //async
    );