每次按键时 Angular 2 表单异步验证 ajax 调用 [英] Angular 2 Form Async validation ajax call on every keypress
问题描述
我正在使用 angular 2 表单异步验证,一切正常,但后来我意识到在输入字段内的每次按键时都会对服务器进行 ajax 调用,这对服务器不利,我尝试了很多东西,但没有任何效果.所以请帮助我如何处理这个问题.
I am playing with angular 2 forms async validation, everything is working fine but then i realised ajax call is made to server on every key press inside input field which is not good for server, i tried many things but nothing works. So please help me to how to deal with this problem.
form: FormGroup;
username: FormControl;
password: FormControl;
constructor(private fb: FormBuilder, private http: Http) {
this.username = new FormControl("", Validators.compose([
Validators.required,
SignupValidators.CannotContainSpace]),
this.usernameShouldBeUnique.bind(this));
this.password = new FormControl("", Validators.compose([Validators.required]));
this.form = fb.group({
username: this.username,
password: this.password
});
}
异步验证方法:
usernameShouldBeUnique(formControl:FormControl) {
return new Promise(resolve => {
let params = new URLSearchParams();
params.set('username', formControl.value);
this.http.get('http://localhost:1667/api/users/signup/namecheck', { search: params })
.subscribe(data => resolve(null),
error => resolve({ usernameShouldBeUnique: true })
);
});
}
推荐答案
根据这个很好的答案,您可以使用非常方便的setTimeout
和clearTimeout
延迟您的请求:
Per this fine answer, you can use the surprisingly-handy setTimeout
and clearTimeout
to delay your requests:
private timeout;
usernameShouldBeUnique(formControl: FormControl) {
MY_DELAY = 500;
clearTimeout(this.timeout);
return new Promise(resolve => {
let params = new URLSearchParams();
params.set('username', formControl.value);
this.timeout = setTimeout(() => {
this.http.get('http://localhost:1667/api/users/signup/namecheck', {
search: params
})
.subscribe(data => resolve(null),
error => resolve({
usernameShouldBeUnique: true
})
);
}, MY_DELAY);
});
}
MY_DELAY
将导致请求等待 500 毫秒,以便在继续之前不再进行验证更改.
MY_DELAY
will cause the request to wait 500 milliseconds for no more validation changes before proceeding.
这篇关于每次按键时 Angular 2 表单异步验证 ajax 调用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!