5 Ways to Implement Email Validation in Angular Reactive Forms

Email validation is a basic requirement for data integrity in Angular reactive forms. Here are five ways to implement it, complete with code snippets. You will also see the common pitfalls of these traditional methods and how Abstract API offers a solution to these challenges.

How to Implement Email Validation in Angular

Angular offers several built-in and custom methods to validate email inputs in reactive forms. These range from simple pattern checks to more complex synchronous and asynchronous functions for robust validation.

Built-in Email Validator

Angular provides a ready-made function, Validators.email, that you can add to a reactive FormControl. This function uses a regular expression inspired by WHATWG standards to perform the check.

It rejects addresses with a local part over 64 bytes or a total length over 254 bytes. It also flags emails where the local part starts or ends with a dot. As a synchronous validator, it runs on every value change and returns an error object if the pattern fails.

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    email: ['', [Validators.required, Validators.email]]
  });
}

Custom Regex with Validators.pattern

When you need to enforce a specific email format, such as one for internal company use, you can use Validators.pattern. This function accepts a custom regular expression to validate the input.

This approach lets you define precise rules. You can permit only certain top-level domains or forbid special characters like the plus sign. The regex can be defined inline or externalized for reuse across your application, as shown in some community examples.

const companyMail = /^[a-z0-9._%+-]+@acme\.corp$/i;
this.form = this.fb.group({
  email: ['', [Validators.required, Validators.pattern(companyMail)]]
});

Custom Synchronous Validator Function

For validation logic that a single regex cannot handle, you can write a custom synchronous validator function. This is useful for more complex scenarios, such as a check against a list of disposable email domains.

The function receives the form control as an argument and should return null if validation passes or an error object if it fails. These functions can be parameterized to create reusable and manageable validators.

function enterpriseEmailValidator(control: AbstractControl) {
  const value = control.value as string;
  if (!/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i.test(value)) return {invalidFormat: true};
  const [_, domain] = value.split('@');
  if (['mailinator.com','tempmail.dev'].includes(domain)) return {disposable: true};
  return null;
}
this.form = this.fb.group({
  email: ['', [Validators.required, enterpriseEmailValidator]]
});

Custom Asynchronous Validator

To confirm an email's uniqueness or deliverability, you can implement a custom asynchronous validator. This type of validator typically makes an HTTP request to a backend service to check the email against a database.

You attach an AsyncValidatorFn to the form control, which returns an Observable. According to the official documentation, Angular runs async validators only after all synchronous validators have passed. To prevent excessive server requests, you can set the form's updateOn option to 'blur'. This is a common pattern for async validators.

emailTaken(control: AbstractControl) {
  return this.userSvc.isEmailTaken(control.value).pipe(
    map(isTaken => (isTaken ? {taken: true} : null))
  );
}
this.form = this.fb.group({
  email: ['', [Validators.required, Validators.email], [this.emailTaken.bind(this)]],
}, {updateOn: 'blur'});

Challenges of Email Validation in Angular

These built-in and custom approaches present practical hurdles. Developers often face issues with pattern accuracy, maintenance overhead, and performance bottlenecks when they implement these validators.

• The built-in Validators.email function uses a limited regex. It rejects valid but uncommon addresses, like those with plus-tagged aliases, and permits some non-deliverable strings. This limitation requires fragile custom validators.
• Hard-coded patterns in Validators.pattern or custom functions quickly become obsolete. They fail to validate new top-level domains and internationalized addresses unless developers perform constant, manual updates to the regular expressions.
• Custom asynchronous validators for deliverability checks introduce complexity. They require extra logic for observables and error handling to prevent race conditions, since they run only after synchronous validation passes.
• Complex regular expressions used in Validators.pattern create performance and security risks. A crafted input can cause a Regex-DoS attack that freezes the application, and developers often find mismatches between testers and Angular's parser.