Angular项目中异步校验处理

Angular中创建异步校验指令 phone-validator,并在相对应的module文件中declarations{}下声明该指令函数，

@NgModule({

  declarations: [
    PhoneValidatorDirective,
  ],
该校验器会实现一个validate()方法，返回结构为Promise<> 或者 Observable<>
validate(control: AbstractControl):Promise<ValidationErrors| null> | Observable<

ValidationErrors| null>{　
　// 我的返回数据结构为Observable<Result<string>>

　　//control.value 为当前控件的值
　　this.us.verifyPhone(control.value).pipe(){ //rxjs编程 函数式操作
　　　　//map操作符用于数据类型转换
　　　　map((rs: Result<string>)=>{
　　　　　　return rs.success ? null:{verifyPhone: true};
　　　　　

　　　　}),
　　　　//of下封装了一个Observable<ValidationError>并返回
　　　　catchError(e=>of({verifyPhone: true}));
　　　　
　　}
}