Proper email validation is a fundamental step in any Angular application. You'll find five distinct methods for implementing it, each with working code. We'll also cover the common pitfalls of these techniques and show how Abstract API offers a more reliable alternative.
How to Implement Email Validation in Angular
Here are four common ways to add email validation to your Angular forms. Each method uses a different feature of the framework or an external library to check email syntax.
Reactive Forms with Validators.email
Reactive forms provide a direct way to validate emails. You use the built-in `Validators.email` from `@angular/forms`. This validator employs a pattern that conforms to RFC standards.
The pattern confirms a total length under 254 characters, a local-part under 64 characters, allowed symbols, and proper hyphen rules in the domain. The compiled regex is quite complex.
import { FormControl, Validators } from '@angular/forms';
email = new FormControl('', [Validators.required, Validators.email]);
Template-Driven Forms with HTML5
For template-driven forms, validation is simpler. When you set an input's `type` attribute to 'email', you instruct Angular to apply its standard email validator automatically.
This process occurs entirely from the template metadata, so no component code is necessary. The form control's status flips to INVALID if the input fails the browser and Angular validation.
<form #f="ngForm">
<input type="email" name="email" ngModel required>
</form>
A Custom Synchronous Validator
You can create your own validation logic with a custom synchronous validator. This is a function that receives a form control and returns either an error object or null if validation passes.
For example, you can enforce a corporate email format that only accepts addresses from a specific domain. You then add this function to the list of validators on a reactive form control or use it as a reusable directive.
import { AbstractControl, ValidationErrors } from '@angular/forms';
export function corporateEmailValidator(control: AbstractControl): ValidationErrors | null {
const ok = /^[a-z0-9._%+-]+@mycorp\.com$/i.test(control.value || '');
return ok ? null : {corporateEmail: true};
}
// Attach it in a reactive form:
email = new FormControl('', [Validators.required, corporateEmailValidator]);
The ng2-validation Library
The `ng2-validation` library offers a set of pre-built validators. After you install the package, you can import `CustomValidators` and apply its email validator to a form control.
This method uses the library's own internal pattern. It provides a simple one-liner implementation and centralizes updates. The package also contains validators for other data types like credit cards and UUIDs.
// Installation
npm i ng2-validation
// Code
import { CustomValidators } from 'ng2-validation';
email = this.fb.control('', [Validators.required, CustomValidators.email]);
Challenges of Email Validation in Angular
While these methods seem straightforward, they introduce significant validation gaps. The reliance on regular expressions and client-side checks creates several practical problems for developers who need robust and accurate email verification.
- The built-in Validators.email uses a shallow regex. It rejects valid emails with accents or Unicode characters, as it does not fully conform to modern RFC standards, which creates false negatives for international users.
- Template-driven forms with type="email" can cause cross-browser issues. Angular's validator may conflict with the browser's native HTML5 engine, so an address valid in one environment might fail in another.
- The default regex in Validators.email is too permissive. It accepts addresses without a top-level domain, like "user@domain". This allows invalid data to pass client-side checks, only to fail at the server.
- Custom validators and libraries like ng2-validation add maintenance overhead. You become responsible for updates, bug fixes, and potential version conflicts, which complicates the application's long-term stability and development.
Validate Emails with Abstract API
Add an email validator to your Angular app to maintain clean data and user trust.
Get started for free
How Abstract API Handles Email Validation in Angular
Abstract API addresses the core weaknesses of traditional methods. It performs comprehensive, real-time checks that go beyond simple pattern matches.
- It moves beyond basic RFC-5322 pattern validation. The API checks for syntax errors, suggests typo corrections, looks up MX records, and performs an SMTP handshake to confirm a mailbox exists.
- The service detects disposable, role-based, and catch-all email addresses. This helps prevent data pollution and reduces wasted transactional email traffic.
- You receive deliverability insight at the moment of form submission. This removes the need to maintain your own validation infrastructure, rules, or blocklists.
- A single network call replaces multiple custom validators and DNS libraries. This simplifies your application's validation logic.
How to Set Up Abstract API in Your Project
Once you understand Abstract’s capabilities, you can add its email validator API to your project with ease.
- Sign up at Abstract and create an Email Verification key.
- Add HttpClientModule to your AppModule imports.
- Store the key and endpoint in environment.ts.
- Generate a service with the command: ng g s email-validation.
- Inside the service, inject HttpClient and expose a method to validate an email address.
- Call the service from your form component and gate submission based on the validation result.
// src/environments/environment.ts
export const environment = {
abstractKey: 'YOUR_API_KEY',
abstractEndpoint: 'https://emailvalidation.abstractapi.com/v1/'
};
// src/app/services/email-validation.service.ts
@Injectable({ providedIn: 'root' })
export class EmailValidationService {
constructor(private http: HttpClient) {}
validate(email: string) {
const params = { api_key: environment.abstractKey, email };
return this.http.get<ValidationResult>(environment.abstractEndpoint, { params });
}
}
Sample Email Validator Implementation with Abstract API
The code below shows how to call the validation service from a component after a user submits a form. It sends the email to the API and waits for a response. If the API returns a DELIVERABLE status, the app proceeds to create the account. Otherwise, it sets a custom validation error on the email form field.
// src/app/signup.component.ts
this.form = this.fb.group({ email: ['', [Validators.required, Validators.email]] });
submit() {
const mail = this.form.value.email;
this.validator.validate(mail).subscribe(r => {
if (r.deliverability === 'DELIVERABLE') { this.createAccount(); }
else { this.form.controls.email.setErrors({ undeliverable: true }); }
});
}
The API returns a concise JSON object with detailed validation results. Here is a sample response for a valid email address:
{
"email": "johnsmith@gmail.com",
"autocorrect": "",
"deliverability": "DELIVERABLE",
"quality_score": 0.90,
"is_valid_format": { "value": true, "text": "TRUE" },
"is_free_email": { "value": true, "text": "TRUE" },
"is_disposable_email": { "value": false, "text": "FALSE" },
"is_role_email": { "value": false, "text": "FALSE" },
"is_catchall_email": { "value": false, "text": "FALSE" },
"is_mx_found": { "value": true, "text": "TRUE" },
"is_smtp_valid": { "value": true, "text": "TRUE" }
}
The response fields give you granular control. The deliverability field provides the main go or no-go decision. The quality_score is a confidence metric you can use to greylist addresses. Other boolean fields like is_disposable_email and is_catchall_email let you build a more nuanced user experience, such as to warn users or flag addresses for manual review.
Final Thoughts
Traditional email validation in Angular only confirms a pattern match. This method results in high false positives and polluted data. Abstract API overcomes these issues with real-time checks for domain records, mailbox existence, and disposable addresses. To reliably validate user emails, create an account on Abstract API and get your free API key.
Validate Emails with Abstract API
Add an email validator to your Angular project to maintain clean and accurate user data.
Get started for free
