Angular async valildator not getting unsubscribed when a new value is checked

Question

I am trying to make a validator that checks if an email address already exists, and as usual we don't want the server to be hammered by requests while the user is still typing the email address into the input field.

Currently the code looks as follows

return Observable.timer(1000).switchMap(() => {
       return this.userService.emailExists(control.value)
        .mapTo(exist => Observable.of({ "emailExists": exist }))
        .catch(err => Observable.of({ "emailExists": true }));
    }).subscribe();

From reading a previous Stackoverflow post (https://stackoverflow.com/a/45080026/5247016), when the validator is run over and over again it's supposed to unsubscibe from the previous observable (to not queue them) but doesn't seem to do so and so with the code above we get the server hit every time a key is hit and the 1 second timer is executed.

https://stackoverflow.com/a/45080026/5247016 There is a difference between my code and the post - without the .subscribe() nothing works and the observable http call is never made - so I can only assume an update to Angular or Rxjs has caused this behaviour to change.

What we want to do, using Observables not using setTimeout and clearTimeout, is with the Angular form async validator is only have request made to the server when the user has paused/stopped typing for 1 second or so. Any help would be greatly appreciated.

To all it easy to miss in the Angular docs, as I did. Async validators are not included in the same parameter as the sync validators it's a separate parameter - (https://angular.io/api/forms/FormGroup#constructor) — Jjj, Sep 18 '17 at 10:45

score 2 · Accepted Answer · answered Sep 16 '17 at 21:20

You should use debounceTime operator rather than Observable.timer.

return this.userService.emailExists(control.value)
           .debounceTime(1000)
           .mapTo(exist => Observable.of({ "emailExists": exist }))
           .catch(err => Observable.of({ "emailExists": true }));

Below are details of DebounceTime:

debounceTime delays values emitted by the source Observable, but drops previous pending delayed emissions if a new value arrives on the source Observable.

Angular async valildator not getting unsubscribed when a new value is checked

1 Answers1