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