Email Validation in Angular using Regular Expression

Email validation is an essential aspect of any web application. In this
article, we will explore how to validate email addresses using regular
expressions in Angular.

What is Regular Expression?

Regular Expression, also known as regex or regexp, is a sequence of characters
that define a search pattern. It is commonly used in programming languages and
text editors for pattern matching and search and replace operations.

Why Validate Email Addresses?

Email validation is necessary to ensure that the user enters a valid email
address. It helps in preventing spam, improving data quality, and enhancing
user experience.

How to Validate Email Addresses in Angular?

Angular provides built-in email validation using the EmailValidator class.
However, this validation only checks if the input value is a string that
matches the email format. It does not check if the email address is valid or
exists.

To validate email addresses using regular expressions in Angular, we need to
create a custom directive. The directive will use the ngModel directive to get
the input value and the Validators module to perform the validation.

Creating the Custom Directive

To create the custom directive, we first need to import the necessary modules
and define the regex pattern for email validation:

import { Directive } from '@angular/core';import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;@Directive({selector: '[appEmailValidator][ngModel]',providers: [{ provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true }]})export class EmailValidatorDirective implements Validator {validate(control: AbstractControl): { [key: string]: any } | null {if (control.value && !EMAIL_REGEX.test(control.value)) {return { 'invalidEmail': true };}return null;}}

In the above code, we define the EMAIL_REGEX pattern for email validation and
create the EmailValidatorDirective class. The class implements the Validator
interface and overrides the validate method to perform the validation.

The validate method takes an AbstractControl parameter that represents the
form control being validated. It returns an object with a key-value pair of
the validation error and a boolean value. If the input value does not match
the regex pattern, the method returns an object with the 'invalidEmail' key
and a true value.

Using the Custom Directive

Once we have created the custom directive, we can use it in any form control
by adding the appEmailValidator attribute:

<input type="email" name="email" [(ngModel)]="user.email" required appEmailValidator>

In the above code, we add the appEmailValidator attribute to the input element
and bind it to the ngModel directive to get the input value. We also add the
required attribute to make the field mandatory.

Conclusion

Validating email addresses using regular expressions is an effective way to
ensure data quality and prevent spam. In Angular, we can create custom
directives to perform email validation using regex patterns. This helps in
improving the user experience and enhancing the overall application
functionality.