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

by

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.

More Related Contents:

  1. Angular2 – FormControl Validation on blur
  2. async/await in Angular `ngOnInit`
  3. Get all validation errors from Angular 2 FormGroup
  4. Angular – two subscriptions in ngOnInit result in object ‘undefined’
  5. How to validate white spaces/empty spaces? [Angular 2]
  6. What is the proper use of an EventEmitter?
  7. How do I share data between components in Angular 2?
  8. Could not find module “@angular-devkit/build-angular”
  9. Angular2: Make route paths case insensitive
  10. Storing injector instance for use in components
  11. ng serve not working in Docker container
  12. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  13. No provider for AngularFireDatabase, AngularFireAuth
  14. Is there a way to remove unused imports and declarations from Angular 2+? [closed]
  15. Filtering specific column in Angular Material table in angular 5 [duplicate]
  16. TS2531: Object is possibly ‘null’
  17. Custom ExceptionHandler change detection lag
  18. ng2 – dynamically creating a component based on a template
  19. angular-i18n work-around for translations in code?
  20. Get access to FormControl from the custom form component in Angular
  21. How do I navigate to a sibling route?
  22. Trigger update of component view from service – No Provider for ChangeDetectorRef
  23. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  24. Mocking Child Components – Angular 2
  25. What is the meaning of question mark in expressions in Angular 2?
  26. How to solve the circular dependency
  27. tap() isn’t triggered in RXJS Pipe
  28. Conditionally apply click event in Angular 4
  29. ::ng-deep going to be deprecated – Any alternatives?
  30. Accessing firebase.storage() with AngularFire2 (Angular2 rc.5)

Leave a Comment