angularvalidationasynchronousdebouncing

How to add debounce time to an async validator in angular 2?


This is my Async Validator it doesn't have a debounce time, how can I add it?

static emailExist(_signupService:SignupService) {
  return (control:Control) => {
    return new Promise((resolve, reject) => {
      _signupService.checkEmail(control.value)
        .subscribe(
          data => {
            if (data.response.available == true) {
              resolve(null);
            } else {
              resolve({emailExist: true});
            }
          },
          err => {
            resolve({emailExist: true});
          })
      })
    }
}

Solution

  • Angular 4+, Using Observable.timer(debounceTime) :

    @izupet 's answer is right but it is worth noticing that it is even simpler when you use Observable:

    emailAvailability(control: Control) {
        return Observable.timer(500).switchMap(()=>{
          return this._service.checkEmail({email: control.value})
            .mapTo(null)
            .catch(err=>Observable.of({availability: true}));
        });
    }
    

    Since angular 4 has been released, if a new value is sent for checking, Angular unsubscribes from Observable while it's still paused in the timer, so you don't actually need to manage the setTimeout/clearTimeout logic by yourself.

    Using timer and Angular's async validator behavior we have recreated RxJS debounceTime.