Angular 2 Form Async validation ajax call on every keypress

Question

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

Async validation Method:

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

Okay so what do you want? How should it behave? It can play with observable. — micronyks
– micronyks, Commented Aug 6, 2016 at 8:19
I want to make a delay of 500ms between making request and don't make request if value is unchanged after 500ms — Godfather
– Godfather, Commented Aug 6, 2016 at 8:27
Yes I got it. You can play with Observable which will give you desire behavior. — micronyks
– micronyks, Commented Aug 6, 2016 at 8:27

micronyks · Accepted Answer · 2016-08-06 08:58:54Z

1

You can play with Rxjs operators called debounceTime or delay and distinctUntilchanged as shown below,

usernameShouldBeUnique(formControl:FormControl) {



        let params = new URLSearchParams();
        params.set('username', formControl.value);

     return this.http.get('http://localhost:1667/api/users/signup/namecheck', { search: params })

     // .delay(300)                  <---- check this according to your need
        .debounceTime(300)         //<---- wait for 300ms pause in events
        .distinctUntilChanged()    //<---- ignore if next search term is same as previous


        .subscribe(data => resolve(null), 
                             error => resolve({ usernameShouldBeUnique: true })
                            );



}

edited Aug 6, 2016 at 8:58

answered Aug 6, 2016 at 8:38

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hans Over a year ago

i get this.http.get(...).debounceTime is not a function

heringer Over a year ago

import 'rxjs/add/operator/debounceTime';

heringer Over a year ago

import 'rxjs/add/operator/distinctUntilChanged';

Community · Accepted Answer · 2017-05-23 12:26:20Z

0

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 will cause the request to wait 500 milliseconds for no more validation changes before proceeding.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 6, 2016 at 9:05

Jack Guy

8,5438 gold badges61 silver badges88 bronze badges

Collectives™ on Stack Overflow

Angular 2 Form Async validation ajax call on every keypress

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related