In this article, I am sharing about, how
to create a custom validator for both model driven and template driven forms in
Angular 5.
Built-in validator looks like –
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])[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
<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>