angular 5 async validator not working - angular5

Question

I am validating if mobile number exist on server in angular 5.Si i have created a custom async validator for this.But it is not working nor giving any error and it gives pending status to form field.Any help will be appreciated.here is code of service.ts
import { Injectable } from '#angular/core';
import {HttpClient} from "#angular/common/http";
import { Observable } from "rxjs/Observable";
#Injectable()
export class SignupService {
constructor(private _http:HttpClient) {}
mobileExists(mobile:number):Observable<{}>{
return this._http.get("http://localhost/truck/api/web/user/verify- exist?mobile="+mobile,{responseType:'json'});
}
}
and here is code of my component.ts
import { Component, OnInit } from '#angular/core';
import {FormsModule, ReactiveFormsModule,AbstractControl, ValidationErrors,FormControl,Validators,FormGroup,AsyncValidatorFn} from "#angular/forms";
import {SignupService} from "./signup.service";
import {Observable} from "rxjs/Observable";
import {map,take,debounceTime} from "rxjs/operators";
#Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css'],
providers: [SignupService]
})
export class RegisterComponent implements OnInit {
signupForm: FormGroup;
mobile: number;
password: string;
otp: number;
public exist;
constructor(public service:SignupService) {
}
ngOnInit() {
this.signupForm = new FormGroup({
mobile: new FormControl('',
[Validators.required, Validators.minLength(10), Validators.maxLength(10)],this.mobileValidator.bind(this)),
password: new FormControl('',
[Validators.required, Validators.minLength(6), Validators.maxLength(15)]),
otp: new FormControl('',
[Validators.required, Validators.minLength(6), Validators.maxLength(6)]),
});
}
mobileValidator(control: AbstractControl):any {
return new Observable(resolve => {
this.service.mobileExists(control.value).subscribe(
data=>{
if (data['status'] == 'ok'){
return null;
}else if(this.exist.status == 'exist'){
return {mobileTaken:true};
}
},
error=>{
return console.log(error)
},
);
}
);
}
}

Answer 1

In FormControl use mobile: new FormControl('',
[Validators.required, Validators.minLength(10), Validators.maxLength(10)],[this.mobileValidator()]), so AsyncValidator as third parameter and no need to call bind.
Use map and no need to wrap to new Observable call: mobileValidator() { return (control: AbstractControl): any => { return this.service.mobileExists(control.value).map(data => return (data['status'] == 'ok') ? null : { mobileTaken: true } )); } }
good article is here http://fiyazhasan.me/asynchronous-validation-in-angulars-reactive-forms-control/