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

Question

我需要实现与github api的异步验证。我希望你能帮助我。

 export class UsernameValidator { 
      static usernameTaken(control: FormControl): Promise<ValidationResult> { 
       return new Promise((resolve, reject) => { 
        setTimeout(() => {   
         //How Can i use github Api like this: 
         // if (control.value === "this._http.get('http://api.github.com/users/'+this.username)")) { 
         if (control.value === "David") { 
          console.log('username taken') 
          resolve({"usernameTaken": true}) 
         } else { 

          resolve(null); 
         };     
        }, 1000); 
       }); 

      } 
     } 

谢谢。

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