Angular email validation example

Suggested Videos
Part 15 - Angular form validation | Text | Slides
Part 16 - Displaying angular form validation error messages | Text | Slides
Part 17 - Model binding in angular template driven forms | Text | Slides

In this video we will discuss 

• Validating Email form field in Angular
• Using multiple validators on a single input field
• Angular safe navigation operator

Email validation in Angular : There are 2 different ways to validate email form field in Angular. We can either use pattern validator or email validator. Email validator is introduced in Angular 4. So if you are using Angular 4 or later version you may use email validator or pattern validator to validate email. If you are using Angular 2, then your only choice is to use Pattern validator.


In this video we will discuss using the Angular built-in Email validator and in our next video we will discuss using the Pattern validator. 

Consider the following HTML. Notice we are using Bootstrap classes for styling.

<div class="form-group">

  <label for="email">Email</label>

  <input id="email" type="text" class="form-control" name="email"

          [(ngModel)]="employee.email">

</div>

The above HTML would produce the following Email input field


We want to validate this email input field for 2 things

• Email is required and
• Valid email must be provided

To make email, a required field modify the HTML as shown below

<div class="form-group" [class.has-error]="email.invalid && email.touched">

  <label for="email" class="control-label">Email</label>

  <input id="email" required type="text" class="form-control" name="email"

          [(ngModel)]="employee.email" #email="ngModel">

  <span class="help-block" *ngIf="email.invalid && email.touched">

    Email is required

  </span>

</div>

Code Explanation : 

• [class.has-error]="email.invalid && email.touched". This is class binding in angular. If the email field is touched and invalid, then the Bootstrap class has-error is added to the div element, else the class is removed.
• On the label that displays "Email" text, we applied control-label Bootstrap class. This class turns the label text to red if there is a validation error.
• *ngIf="email.invalid && email.touched". Notice the *ngIf structural directive on the span element. If the email field is touched and invalid the span element is added to the DOM, else it is removed. The Bootstrap help-block class on the span element is for styling.

At this point, if you touch the email field and leave it without typing in anything, you will see the validation error message "Email is required"

We also want to make sure the user enters a valid email. If someone types ABC, that is not a valid email. Angular 4 has built-in email validator, that we can use to validate if the user has entered a valid email. Here are the steps.

Step 1 : On the email input field, place the email directive

<input id="email" required email

Step 2 : Use the following HTML, to display the validation error message. If the email is invalid, angular attaches email key to the errors collection. On the other hand, if the email field is valid, the key email will not be in the errors collection. The question mark here is called the safe navigation operator. It protects against null and undefined values in property paths. It is generally used when we are not sure if a property exists or not. It safely handles null and undefined values, and very useful to prevent null-reference exceptions.

<span class="help-block" *ngIf="email.errors?.email && email.touched">

  Email is Invalid

</span>

Here is the complete HTML that makes the email filed required and also checks if the email has a valid format

<div class="form-group" [class.has-error]="email.invalid && email.touched">

  <label for="email" class="control-label">Email</label>

  <input id="email" required email type="text" class="form-control" name="email"

          [(ngModel)]="employee.email" #email="ngModel">

  <span class="help-block" *ngIf="email.errors?.required && email.touched">

    Email is required

  </span>

  <span class="help-block" *ngIf="email.errors?.email && email.touched">

    Email is Invalid

  </span>

</div>

As of this recording, email validator provided by Angular does not allow null or empty values. When we leave the email field empty, the email validator is still fired. This is wrong. Checking NULL and empty values should be the job of the required validator. The following is the work around.

Bind email directive to a boolean expression. The email validator is only added when the email field value is not an empty string. This ensures that, when we type something in the email field, the email validator is attached to the input field and it validates if the email format is valid or not.

<input id="email" required [email]="employee.email!==''"

Please note : Do not forget to initialise the email property in the employee object to an empty string.

Next video : Using pattern validator to validate email in Angular