async validation with debounce listening to value change

async validation with debounce

import { Component, OnInit } from '@angular/core';';
import { FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
import { Router } from '@angular/router'
import { CommonValidators } from '../service/CommonValidator';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { GlobalService } from '../../shared/service/global.service';
import { AuthHttp } from 'angular2-jwt'
declare var $: any;
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

@Component({
  selector: 'app-sign-up',
  templateUrl: 'signup.test.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignUpComponent implements OnInit {

  registrationForm: FormGroup;
  isRegistered: boolean = false;
  errorMessages: any;
  isLoading: boolean;

  baseurl: string;
  emailLoading:boolean;



  constructor(private http: AuthHttp, private builder: FormBuilder,
    private global: GlobalService, private router: Router, ) {
   
   this.baseurl = global.baseUrl;
    
    this.registrationForm = this.builder.group({
      username: ['', Validators.required, this.usernameValidation.bind(this)],
      email: ['', Validators.required, this.emailValidation.bind(this), CommonValidators.email],
      password: ['', [Validators.required, Validators.minLength(6)]],
      passwordConfirm: ['', [Validators.required, Validators.minLength(6)]]
    }, { validator: CommonValidators.matchingPasswords('password', 'passwordConfirm') });


  emailValidation(ctr: AbstractControl) {
    this.emailLoading = true;
    return ctr
      .valueChanges
      .delay(800)
      .debounceTime(800)
      .distinctUntilChanged()
      .switchMap(value => this.http.get(`${this.baseurl}/api/v2/auth/email-availablity/${value}/`))
      .map(res => res.json())
      .map(res => {
         this.emailLoading = false;
        if (res.message === true) {
          return ctr.setErrors(null);
        } else {
          return ctr.setErrors({ emailValidation: 'email already exist' })
        }
      })
  }
  
  }

Thanks that was helpful!
Been trying for a while now to do async validation with debounce and your solution worked!

Thanks for that validator! I try to resolve the problem with debounceTime in async validator about three days.

Thank you very much