Angular2用户名或电子邮件采用异步验证
发布时间:2020-12-17 17:27:25 所属栏目:安全 来源:网络整理
导读:我需要用 github api实现异步验证.我希望你帮助我. export class UsernameValidator { static usernameTaken(control: FormControl): PromiseValidationResult { return new Promise((resolve,reject) = { setTimeout(() = { //How Can i use github Api lik
我需要用
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); }); } } 谢谢. 解决方法
这是在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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |