Custom Validation In Template-Driven Angular Forms

This article is all about how to implement customized validations when you are working with Template-Driven approach of Angular Forms.

Angular provides built-in validators like required, minlength, maxlength, pattern, etc. but when we want any customized logic for the validation and that can be used anywhere in the application too, then we can use Angular Directives to serve the purpose. Inside this directive, we can describe our customized validation function.

First, in order to use the Template-Driven Forms, we have to import the FormsModule in our app.module.ts file as below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
FormsModule,
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Let’s implement two custom validations here - one for Email and the other one for Confirm Password.

Let’s begin with Email Validation first.

Custom Validation for Email Address

Now as I said, we will create a directive and name it as EmailValidator.

In our example, we want to validate an email address using some regex. So, the email address that is entered by the user should have a valid format according to the regex defined.

So, our emailvalidator.directive.ts will look like this.

import { Directive } from '@angular/core';
import { Validator, NG_VALIDATORS, ValidatorFn, FormControl } from '@angular/forms';
@Directive({
selector: '[appEmailvalidator]',
providers: [
{
provide: NG_VALIDATORS,
useClass: EmailvalidatorDirective,
multi: true
}
]
})
export class EmailvalidatorDirective implements Validator {
validator: ValidatorFn;
constructor() {
this.validator = this.emailValidator();
}
validate(c: FormControl) {
return this.validator(c);
}
emailValidator(): ValidatorFn {
return (control: FormControl) => {
if (control.value != null && control.value !== '') {
let isValid = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/.test(control.value);
if (isValid) {
return null;
} else {
return {
emailvalidator: { valid: false }
};
}
} else {
return null;
}
};
}
}

Okay, let’s break down the above code and understand their working.

Firstly, check the providers' array inside @Directive decorator.

The first element of this array is provide: NG_VALIDATORS. This is a special token and this will add (register) our validator to the collection of all existing validators (like required or minlength). This means that all built-in validators are already added in NG_VALIDATORS token and we are adding our own validator to this.

In the next element, i.e., useClass, we are providing the class name of our custom directive.

And the last element multi: true is a special kind of provider. This will return multiple dependencies as a list of a given token. Basically, we are adding a new value to the NG_VALIDATORS token by taking advantage of multi providers.

Next is our class EmailvalidatorDirective. This class is implementing ValidatorInterface. So here, we need to override the Validate() method of this interface. This validate() method accepts the instance of FormControl as its parameter. And this instance is nothing but the control which we want to validate so, in our case, it will be userEmail control.

The last thing is our emailValidator() method. Inside this method, we will actually define our customized logic for validation. This method will return null if the email address is in proper format otherwise it will return validation error.

Finally, we can apply this directive to our template (text input) like below.

<input class="form-control"
id="userEmaild"
type="text"
appEmailvalidator
placeholder="User Email (required)"
required
ngModel
name="userEmail"
#userEmailVar="ngModel"
[ngClass]="{'is-invalid': (userEmailVar.touched || userEmailVar.dirty) && !userEmailVar.valid }" />

Notice above that appEmailvalidator applied as an attribute to the <input> element. This will make a call to validation function when user enters the value to the input box.

For your convenience, below is the full code for both - Template (HTML) and TS file.

login.component.html (used bootstrap css)

<div class="col-md-6 col-md-offset-4">
<div class="card">
<div class="card-header">
<b>Log In</b>
</div>
<div class="card-body">
<form (ngSubmit)="login(loginForm)"
#loginForm="ngForm"
autocomplete="off">
<fieldset>
<div class="form-group row">
<label class="col-md-2 col-form-label"
for="userEmailId">User Email</label>
<div class="col-md-8">
<input class="form-control"
id="userEmaild"
type="text"
appEmailvalidator
placeholder="User Email (required)"
required
ngModel
name="userEmail"
#userEmailVar="ngModel"
[ngClass]="{'is-invalid': (userEmailVar.touched || userEmailVar.dirty) && !userEmailVar.valid }" />
<span class="invalid-feedback">
<span *ngIf="userEmailVar.hasError('required')">
User email is required.
</span>
<span *ngIf="userEmailVar.hasError('emailvalidator')">
Please provide a valid email address
</span>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form--label"
for="passwordId">Password</label>
<div class="col-md-8">
<input class="form-control"
id="passwordId"
type="password"
placeholder="Password (required)"
required
ngModel
name="password"
#passwordVar="ngModel"
[ngClass]="{'is-invalid': (passwordVar.touched || passwordVar.dirty) && !passwordVar.valid }" />
<span class="invalid-feedback">
<span *ngIf="passwordVar.hasError('required')">
Password is required.
</span>
</span>
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-2">
<button class="btn btn-primary mr-3"
type="submit"
style="width:80px"
[disabled]="!loginForm.valid">
Log In
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="alert alert-danger" *ngIf="errorMessage">{{errorMessage}}</div>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
errorMessage: string;
constructor() { }
ngOnInit() {
}
login(loginForm: NgForm) {
if (loginForm && loginForm.valid) {
const userEmail = loginForm.form.value.userEmail;
const password = loginForm.form.value.password;
alert('Welcome..!!');
console.log(userEmail, password);
} else {
this.errorMessage = 'Please enter a user email and password.';
}
}
}

Okay, so let’s check it out by running our application..!!

Custom Validation In Template-Driven Angular Forms

Custom Validation for Confirm Password

Let’s have another validation where we will match the password and confirm password.

For this, we will be adding another directive and name it as passwordvalidator.

This directive will match the value of the password and confirm password input fields. If both are matched then it will return null otherwise return validation error.

So, our passwordvalidator.directive.ts will look like this.

import { Directive, Attribute } from '@angular/core';
import { NG_VALIDATORS, Validator, FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';
@Directive({
selector: '[appPasswordvalidator]',
providers: [
{
provide: NG_VALIDATORS,
useClass: PasswordvalidatorDirective,
multi: true
}
]
})
export class PasswordvalidatorDirective implements Validator {
constructor(@Attribute('appPasswordvalidator') public PasswordControl: string) { }
validate(c: FormControl) {
const Password = c.root.get(this.PasswordControl);
const ConfirmPassword = c;
if (ConfirmPassword.value === null) {
return null;
}
if (Password) {
const subscription: Subscription = Password.valueChanges.subscribe(() => {
ConfirmPassword.updateValueAndValidity();
subscription.unsubscribe();
});
}
return Password && Password.value !== ConfirmPassword.value ? { passwordMatchError: true } : null;
}
}

As you can see, this directive is also having the same structure or format as the EmailValidator directive is having. A couple of differences are the method() where we are specifying the logic how both passwords can be matched and another one is in the constructor where we are having a parameter for @Attribute.

Let’s see why we used @Attribute decorator:

The @Attribute decorator returns the value of the specified attribute from the host. We are injecting attribute value via this decorator and assign it to the passwordControl variable. In our case host is the input box of the password so the value of the passwordControl variable would be the value of the password input box.

Okay, let’s move on and understand the validate() method.

First, we find the value of password input control in our form and assigned to the Password variable. Then, we read the value of our input (on which this directive is applied) and assign it to the ConfirmPassword variable.

const Password = c.root.get(this.PasswordControl);
const ConfirmPassword = c;

After that, we get the latest value of Password whenever there is any change. This can be done by valueChanges(). More precisely we are subscribing to valueChanges to get the real-time value.

if (Password) {
const subscription: Subscription = Password.valueChanges.subscribe(() => {
ConfirmPassword.updateValueAndValidity();
subscription.unsubscribe();
});
}

Inside this Subscribe method we are using updateValueAndValidity() on ConfirmPassword. This method will recalculate the value and validations of ConfirmPassword every time when there is a change in Password.

Then, we are using unsubscribe() on our Password. This will destroy the data that has been previously held by Password when we have applied subscribe() on it.

Now, the last important thing is to compare Password and ConfirmPassword values.

return Password && Password.value !== ConfirmPassword.value ? { passwordMatchError: true } : null;

So here, we are checking both values are equal or not and returns validation error if they are not equal.

Finally, we can apply this directive to our template.

In our HTML, now we need to add only one more input box for Confirm Password.

<input class="form-control"
id="CnfrmPasswordId"
type="password"
placeholder="Confirm Password (required)"
required
appPasswordvalidator = "passwordVar"
ngModel
name="CnfmPasswordVar"
#CnfmPasswordVar="ngModel"
[ngClass]="{'is-invalid': (CnfmPasswordVar.touched || CnfmPasswordVar.dirty) && !CnfmPasswordVar.valid }" />

Notice above that we have applied appPasswordvalidator as an attribute to the <input> element and we are assigning Password input control to it. By assigning this value, we are able to get it in @Attribute variable in the directive’s constructor.

Let’s run the application and check it out..!!

You can find full code for this here,

Thanks for reading. Happy Coding..!!