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

2. Custom Model Form 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])[a-zA-Z0-9!@#$%^&*]{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

<h1>Employee Form</h1>

<label for="name">Email</label>

</div>

</div>

<label for="Dep">Department</label>

</div>

</div>

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

</form>

<h4 style="color:green;">Record Added Successfully!</h4>

</div>

Pin it

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 Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2