import {Component, Inject} from '@angular/core';
import {FormGroup, Validators, FormBuilder} from '@angular/forms';
import {UsernameValidators} from './usernameValidators'

@Component({
    selector: 'signup-form',
    templateUrl: 'app/signup-form.component.html'
})
export class SignUpFormComponent {

    form: FormGroup;

    constructor(@Inject(FormBuilder) fb: FormBuilder) {
        this.form = fb.group({
            username: ['', Validators.compose([
                Validators.required,
                UsernameValidators.cannotContainSpace
            ]), UsernameValidators.shouldBeUnique],
            password: ['', Validators.required]
        })
    }

    get username(): any {return this.form.get('username');}
    get password(): any {return this.form.get('password');}

}

<form [formGroup]="form" (ngSubmit)="signup()">
    <div class="form-group">
        <label for="username">Username</label>
        <input
                id="username"
                type="text"
                class="form-control"
                formControlName="username" placeholder="Username"
                >
        <div *ngIf="username.touched && username.errors">
            <div *ngIf="username.errors.shouldBeUnique" class="alert alert-danger">This username is already taken</div>
        </div>
</form>

import {FormControl} from '@angular/forms';

export class UsernameValidators {

    static shouldBeUnique(control: FormControl) {
        return new Promise((resolve, reject) => {
            setTimeout(function(){
                if (control.value == "mosh")
                    resolve({ shouldBeUnique: true});
                else
                    resolve(null);
            }, 1000)
        });
    }
}

<div *ngIf="username.touched && username.errors">
    <div *ngIf="username.errors?.shouldBeUnique" class="alert alert-danger">This username is already taken</div>
</div>