python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4

Angular 5 Custom Form Validations –Email Validator, Credit Card Number Validator

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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions