Angular Email Validation in Template-Driven Form with Example

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

Angular template driven forms for email validation

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

Angular email validation using pattern attribute

View Source Code

That’s all for angular email validation in angular template-driven form.