Angular 4

Angular Custom Form Validations –Email, Credit Card Number Validators

In this article, I am sharing about, how to create a custom validator for both model driven and template driven forms in Angular 5.

Two Types of Validators –
1.      Built-in Validators
a.      Email Validator
b.      Password Validator
c.       Secure Site Validator
d.      Credit card validator
Built-in Validators -
1.      Validators .required - Requires a form control to have a non-empty value
2.      Validators .minlength - Requires a form control to have a value of a min length
3.      Validators .maxlength - Requires a form control to have a value of a max length
4.      Validators .pattern - Requires a form control’s value to match a given regex.
5.      And so on

Built-in validator looks like –
this.empForm = new FormGroup({
  'email': new FormControl(this.employee.email,[Validators.required, ValidationService.emailValidator]),
  'name': new FormControl(this.employee.name, [Validators.required,Validators.minLength(4)]),
  'Dep': new FormControl(this.employee.Dep, [Validators.required, Validators.minLength(10)]),
  'Desc': new FormControl(this.employee.Desc, [Validators.required, Validators.minLength(100), Validators.minLength(500)]),
});

Custom Model Form Validators – Validators are core functions, they take as input a FormControl instance and returns either null if it’s valid or flag for errors.

You can use the custom validator to validate a specific requirement like -
1.      Email Validator
2.      Password Validator
3.      Secure Site Validator
4.      Credit card validator
5.      And may more

The Following Steps involve CREATING custom validators -
Steps 1- Create validation service using the CLI command.
ng g service validation


Steps 2 - import validation service in your app NgModule –
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, FormGroup} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {HttpClientModule} from "@angular/common/http";
//MY COMPONENTS
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { EmployeeComponent } from './employee/employee.component';

//My Services
import { AuthServiceService } from './auth-service.service';
import { AuthGuard } from './auth.guard';
import { EmployeeService} from './employee.service';
import { ValidationService } from './validation.service';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    EmployeeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot([
      { path: '', component: AppComponent, pathMatch: 'full' },
      { path: 'register', component: RegisterComponent },
      { path: 'employee', component: EmployeeComponent},
      { path: 'login', component: LoginComponent}])
  ],
  providers: [EmployeeService, ValidationService],
  bootstrap: [AppComponent]
})
export class AppModule { }


Steps 3 - Write the customer validation method in your validation.service.ts -
import { Injectable } from '@angular/core';

@Injectable()
export class ValidationService {

  constructor() { }

  //Check Site contains SSL Security protocol  or Not.
  static secureSiteValidator(control){
    if (!control.value.startsWith('https') || !control.value.includes('.in')) {
      return { IsSecureSite: true };
    }

    return null;
  }

  //Email Validator
  static emailValidator(control) {
      if (control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) {
          return null;
      }
      else {
          return { 'InvalidEmail': true };
      }
  }

  //Password Validator
  static passwordValidator(control) {
      if (control.value.match(/^(?=.*[0-9])[[email protected]#$%^&*]{6,100}$/)) {
          return null;
      }
      else {
          return { 'InvalidPassword': true };
      }
  }
}

Steps 4 - Use of validation service in your components and its looks like –
import { Component, OnInit } from '@angular/core';
import {Employee } from '../employee'
import { Validators, FormGroup, FormControl } from '@angular/forms';
import {EmployeeService} from '../employee.service'
import { ValidationService } from '../validation.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {

  constructor( public _empService: EmployeeService) { }
  empForm:any;

  ngOnInit() {
    this.empForm = new FormGroup({
      'email': new FormControl(this.employee.email,[Validators.required, ValidationService.emailValidator]),
      'name': new FormControl(this.employee.name, [Validators.required,Validators.minLength(4)]),
      'Dep': new FormControl(this.employee.Dep, [Validators.required, Validators.minLength(10)]),
      'Desc': new FormControl(this.employee.Desc, [Validators.required, Validators.minLength(100), Validators.minLength(500)]),
    });
  }

  employee = new Employee(0,'','','','','');
  submitted = false;

  //Add new Employee
  onSubmit() {
    this.submitted = true;
    let isSuccess = this._empService.addEmployee(this.employee);
    if(isSuccess){
     //handle success
     console.log(isSuccess);
    }else{
      //handle errors
    }
  }
}


And
<div class="container">
  <h1>Employee Form</h1>
  <form #empForm="ngForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
          <label for="name">Email</label>
          <input type="text" class="form-control" id="email” required [(ngModel)]="employee.email" name="email">
        </div>
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name” required [(ngModel)]="employee.name" name="name">
    </div>

    <div class="form-group">
      <label for="Dep">Department</label>
      <input type="text" class="form-control" id="Dep” required [(ngModel)]="employee.Dep" name="Dep">
    </div>

    <div class="form-group">
      <label for="Desc">Desc</label>
      <input type="text" class="form-control" id="Desc” required [(ngModel)]="employee.Desc" name="Desc">
    </div>

    <button type="submit" class="btn btn-success" [disabled]="!empForm.form.valid">Submit</button>
  </form>

  <div [hidden]="!submitted">
    <h4 style="color:green;">Record Added Successfully!</h4>
  </div>
</div>

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^