Reactive Form (Default && Custom Validation )

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ContactFormComponent } from './contact-form/contact-form.component';
import { SignupFormComponent } from './signup-form/signup-form.component';
import { NewCourseFormComponent } from './new-course-form/new-course-form.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ,    ReactiveFormsModule ],
  declarations: [ AppComponent, HelloComponent, ContactFormComponent  , SignupFormComponent, NewCourseFormComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

signup-form.component.html

<form [formGroup]="form"  (ngSubmit)="Login()"  >
    
    <div class="alert alert-danger" *ngIf="form.errors"> UserName or Password is False </div>
    
    <div class="form-group">
        <label for="username">Username</label>
        <input 
          formControlName ="userName"
            id="username" 
            type="text" 
            class="form-control"
            (click)="logX()"
            >
    </div>

        <div *ngIf="userName.pending" >Loding From Server...</div>

    <div  *ngIf="userName.touched && userName.invalid" class="alert alert-danger">
        <span *ngIf="userName.errors.required">  This Field is Requierd </span>
        <span *ngIf="userName.errors.minlength" >The userName Should at least be {{userName.errors.minlength.requiredLength}} characters yout typed
         {{userName.errors.minlength.actualLength}}
        </span>
        <span *ngIf="userName.errors.cannNotContainSpace">  Remove All Spaces </span>
		<span *ngIf="userName.errors.shoulBeUnique"> This user Exist </span>
       </div>
   
         

    <div class="form-group">
        <label for="password">Password</label>
        <input 
          formControlName ="passWord"
            id="password" 
            type="text" 
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

signup-form.component.ts

import { Component } from '@angular/core';
import { FormGroup , FormControl , AbstractControl, Validators } from '@angular/forms';
import { userNameValidators } from './userName.validators';
@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent {

  public form = new  FormGroup(
    { 
      userName: new FormControl('',[Validators.required , Validators.minLength(3) , 
	  userNameValidators.cannNotContainSpace ],userNameValidators.shoulBeUnique ),
      passWord: new FormControl('',Validators.required)
  });

  get userName () {

    return this.form.get('userName');
  }

  public logX = () => {
    console.log(this.userName);
  }

  public Login = () => {

    this.form.setErrors(
      {
        loginFailed:true
      });

  }

}

userName.validators.ts

import { AbstractControl, ValidationErrors } from "@angular/forms";

export class userNameValidators {

 static cannNotContainSpace(control:AbstractControl): ValidationErrors | null {
    if((control.value as string).indexOf(' ') != -1 ){
        return {cannNotContainSpace: true};
    }
   
    return null;
}


 static shoulBeUnique = (control:AbstractControl): Promise<ValidationErrors | null> => {
	
	return new Promise((resolve,reject)=>{
		
	setTimeout(()=> {
		 
    if(control.value == 'atef'){
	resolve({ shoulBeUnique: true });
	} else {
		resolve(null)
	} 			
	 },2000);

 })


}