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

これはリアクティブフォーム内で実装されますが、フォーム駆動型ソリューションのソリューションに変更可能である必要があります。サービス自体はこのようになります

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>; 
    }; 
<...> 
} 

バリデータは、実際にはAPI（特定のユーザーが存在しない場合は404が返される）を経由して取得しないサービスを与えています

だから（配列の第三スポットがasyncValidatorsであるように、私たちはサービスに注入し、バリデータを適用します。

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

かなり正常な探して、実際の入力で0

：

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

は、ここで非同期バリデータの使用を実証Plunkerです：http://plnkr.co/edit/19lp0E9x6L4kPyX0ORg0?p=preview