Angular 2 – Async Validator – Username/email availability check

In this post I will show you, how we can create custom async validator to check for email availability, same logic you can apply for username or other async validations.

Lets create a component:

import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { UserService } from '../services/user.service';

@Component({
  selector: 'signup',
  template: `
This email has been registered already The Email field is required. The Email field must contain a valid email address.
`, }) export class SignupComponent { form: FormGroup; constructor(private userService: UserService, private fb: FormBuilder) { this.buildForm(); } buildForm(): void { this.form = this.fb.group({ "email": ["", [ Validators.required, Validators.minLength(3) ], this.isEmailUnique.bind(this) // async Validator passed as 3rd parameter ] }); } isEmailUnique(control: FormControl) { const q = new Promise((resolve, reject) => { setTimeout(() => { this.userService.isEmailRegisterd(control.value).subscribe(() => { resolve(null); }, () => { resolve({ 'isEmailUnique': true }); }); }, 1000); }); return q; } onSubmit() { } }

Here is my user service:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';


@Injectable()
export class UserService {

    constructor(private http: Http) { }

    isEmailRegisterd(email: string) {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.post('http://localhost:8080/api/v1/isEmailRegisterd', JSON.stringify({ email: email }), { headers: headers })
            .map((response: Response) => response.json())
            .catch(this.handleError);
    }

    private handleError(error: any) {
        console.log(error);
        return Observable.throw(error.json());
        ;
    }


}

Backed server response for unregistered email will be null and for registered email address will be as shown below –

{
"statusCode": 400,
"error": "Bad Request",
"message": "Email address already registerd"
}

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

DMCA.com Protection Status