每个按键上的Angular 2 Form Async验证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 Form Async验证ajax调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！