In this article, We’ll see an example of angular email validation using email and pattern attributes. We’ll see the example for template-driven forms. If you’re using reactive forms then read this article. Angular Email Validation in Reactive Form with Example.
Email validation is one of the necessary things that every application must check for. Because it helps you to protect against bounces and to avoid spam traps.
It doesn’t waste your time and money emailing bad leads. Invalid emails will never convert. Validating emails ensures that you are contacting interested parties.
Fortunately Angular offers few attributes to validate an email.
We can do Email Validation in Angular using one of the following attributes based on our needs.
- email attribute : It’s a built-in directive in angular that adds the email validator to controls marked with the email attribute.
- pattern attribute : This directive allows us to provide our custom regular expression (regex) to validate an email. This validator will be helpful if we want to only allow company’s email address and etc.
Now we’ll see an example of email validation in angular.
Table of Contents
1. Angular Email Validation using email attribute
Now we’ll see an example of angular email validation in Template-Driven forms.
Angular Email Validation in Template-Driven Forms
To use template drive forms, we’ll need to include FormsModule
in app.module.ts
as following:
//app.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
//other imports here
FormsModule
],
//more code here
})
export class AppModule { }
Template-driven form manage the logic inside the template so in template-driven forms we don’t need to create FormControl or FormGroup inside a component file. so we can use the directive in the template to perform the email validation.
Now we’ll create a form using template-driven form. In template-driven form, we can use ngForm
directive to track the status and validity of the form and all the input of the form.
Then we’ll apply ngModel
directive with name attribute to the input. It’ll create FormControl
instance and will keep the model sync with the view and will also keep track of the input value, user activity and validation status of the control.
To validate an email in template drive forms we will need to use email
attribute as following.
<input type="email" name="email" [class.is-invalid]="emailRef.invalid && emailRef.touched" class="form-control" [(ngmodel)]="user.email" [email]="emailValidation" #emailref="ngModel">
Here in the above code, we’ve added dynamic email
attribute. If emailValidation
will be true then it’ll add otherwise it won’t add.
We can show validation error by using the following code:
<div *ngif="(emailRef.invalid && emailRef.touched) || emailRef.dirty">
<small class="text-danger" *ngif="emailRef.errors?.required">Email address is required</small>
<small class="text-danger" *ngif="emailRef.errors?.email">Email address is invalid</small>
</div>
Our template file will looks as:
<form #userregistrationform="ngForm" (ngsubmit)="submit(userRegistrationForm.value)">
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" [class.is-invalid]="nameRef.invalid && nameRef.touched" class="form-control" [(ngmodel)]="user.name" #nameref="ngModel" required="">
<div *ngif="(nameRef.invalid && nameRef.touched) || nameRef.dirty">
<small *ngif="nameRef.errors?.required" class="text-danger">Name is required</small>
</div>
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" name="email" [class.is-invalid]="emailRef.invalid && emailRef.touched" class="form-control" [(ngmodel)]="user.email" [email]="emailValidation" #emailref="ngModel">
<div *ngif="(emailRef.invalid && emailRef.touched) || emailRef.dirty">
<small class="text-danger" *ngif="emailRef.errors?.required">Email address is required</small>
<small class="text-danger" *ngif="emailRef.errors?.email">Email address is invalid</small>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Save</button>
</div>
</form>
Our component file will looks as
import { Component, OnInit } from "@angular/core";
import {
FormControl,
FormGroup,
FormBuilder,
Validators
} from "@angular/forms";
@Component({
selector: "app-reactive-form-email-validation",
templateUrl: "./reactive-form-email-validation.component.html",
styleUrls: ["./reactive-form-email-validation.component.css"]
})
export class ReactiveFormEmailValidationComponent implements OnInit {
userRegistrationForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.userRegistrationForm = this.fb.group({
name: ["", Validators.required],
email: ["", Validators.email]
});
}
}
Output

2. Angular Email Validation using pattern attribute
We can also validate an email using pattern attribute in template-driven forms.
To use PatternValidator, we’ll add pattern attribute to the form input controls. It’ll check whether the value matches with the supplied regex pattern or not and based on that it’ll update the validation status of the input.
We’ll use following regex to validate an email
^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$
and we can apply the regex to the pattern attribute in the following way:
<input type="email" name="email" [class.is-invalid]="emailRef.invalid && emailRef.touched" class="form-control" [(ngmodel)]="user.email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" #emailref="ngModel">
When the input won’t match with the regex pattern, we can show the error message in following way:
<div *ngif="(emailRef.invalid && emailRef.touched) || emailRef.dirty">
<small class="text-danger" *ngif="emailRef.errors?.required">Email address is required</small>
<small class="text-danger" *ngif="emailRef.errors?.pattern">Email address is invalid</small>
</div>
Full Code
template-driven-form-pattern-email-validation.component.html
<form #userregistrationform="ngForm" (ngsubmit)="submit(userRegistrationForm.value)">
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" [class.is-invalid]="nameRef.invalid && nameRef.touched" class="form-control" [(ngmodel)]="user.name" #nameref="ngModel" required="">
<div *ngif="(nameRef.invalid && nameRef.touched) || nameRef.dirty">
<small *ngif="nameRef.errors?.required" class="text-danger">Name is required</small>
</div>
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" name="email" [class.is-invalid]="emailRef.invalid && emailRef.touched" class="form-control" [(ngmodel)]="user.email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" #emailref="ngModel">
<div *ngif="(emailRef.invalid && emailRef.touched) || emailRef.dirty">
<small class="text-danger" *ngif="emailRef.errors?.required">Email address is required</small>
<small class="text-danger" *ngif="emailRef.errors?.pattern">Email address is invalid</small>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Save</button>
</div>
</form>
template-driven-form-pattern-email-validation.component.ts
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-template-driven-form-pattern-email-validation",
templateUrl: "./template-driven-form-pattern-email-validation.component.html",
styleUrls: ["./template-driven-form-pattern-email-validation.component.css"]
})
export class TemplateDrivenFormPatternEmailValidationComponent
implements OnInit {
user: any = { name: "", email: "" };
emailValidation: boolean = true;
constructor() {}
ngOnInit() {}
submit(form: any) {
console.log(form);
}
}
Output

That’s all for angular email validation in angular template-driven form.
Also Read:
- Template Reference Variables(#var) in Angular
- How to get names and values of enum in typescript
- Different ways to read Local JSON file in Angular with example
- Angular Material Date Range Picker
- Angular Material Grid Layout Example
- What’s new in Angular 10
- Integrate CKEditor(rich text editor) in Angular
- Different ways to install bootstrap 4 in angular application
- Convert String to Number in Javascript