Question

我需要使用github api实现异步验证。我希望你能帮帮我。

--insecure

谢谢。

Answer 1

这是在Reactive Form中实现的，但应该可以修改为表单驱动方法的解决方案。

验证器获得通过API实际获取的服务（如果给定用户不存在，则返回404）：

export function usernameTaken(httpService: HttpService) {
    return control => new Promise((resolve, reject) => {
      console.log("in validator");
            //How Can i use github Api like this: 
            httpService.lookupUser(control.value).subscribe(data => {
              console.log(data);
              if(data.id) {
                resolve({ usernameTaken : true})
              } else {
                resolve(null);
              }
            }, (err) => {
              console.log("in error"+ err);
              if(err !== "404 - Not Found") {
                resolve({ usernameTaken : true});
            } else {
              resolve(null);
            }
              });
    });
}

服务本身如下：

 @Injectable()
 export class HttpService {
   constructor(private http: Http) {}

   lookupUser(username: string): Observable<any> {
        return this.http.get("https://api.github.com/users/" + username)
            .map(this.extractData)
            .catch(this.handleError) as Observable<any>;
    };
 <...>
 }

我们注入服务并像这样应用验证器（数组中的第三个位置是asyncValidators：

constructor(private fb: FormBuilder, private httpService: HttpService) {
    this.name = 'Angular2',
    this.form = this.fb.group({
      username: ['', Validators.required, usernameTaken(this.httpService)]
    });

实际输入看起来很正常：

<input type="text" placeholder="Username" formControlName="username"/>

这是一个使用异步验证器的Plunker：http://plnkr.co/edit/19lp0E9x6L4kPyX0ORg0?p=preview

Angular2用户名或电子邮件采用异步验证

1 个答案: