Angular regular expression validation

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

In this video we will discuss using pattern validator in angular to meet most of your application complex validation requirements. 


With the pattern validator we use a regular expression. Regular expressions are extremely useful when you want to validate if a given string conforms to a specified pattern. 

For example, you can use regular expressions to check if a given email conforms to a a valid email format. Similarly you can also check if provided postcode conforms to a specific country postcode format. 

Apart from checking conformity with a pattern, they can also be used to extract sub-strings from a given input string.


To validate if the provided email has a valid email pattern we can use the pattern validator in angular. To use the pattern validator use the pattern attribute along with the regular expression on the input field you want to validate.

<input pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" type="text"

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

It is easy to learn regular expressions. Initially they may appear complicated, but if you get the basics right it is very easy to understand them. However, you can also find the commonly used regular expressions on the internet. For example, if you want to find a regular expression to validate email address, simply search the internet with the following string
Regular expression for email validation

Use the following HTML, to display the validation error message. If the email is invalid, angular attaches pattern key to the errors collection. On the other hand, if the email field is valid, the key pattern will not be in the errors collection. The question mark here is called the safe navigation operator. We discussed this operator in detail in our previous video. If you are new to this operator, please check out our previous video.

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

  Email is Invalid

</span>

The following example, shows both required and pattern validators on the Email input field.

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

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

  <input required pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"

         id="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?.pattern && email.touched">

    Email is Invalid

  </span>

</div>

Let's take this pattern validation to the next level. I want to validate emails against a specific domain. For example pragimtech.com is the only valid domain that I want to allow. Any other domain should be considered invalid. This can be very easily achieved with the following regular expression.

^[a-zA-Z0-9_.+-]+@(?:(?:[a-zA-Z0-9-]+\.)?[a-zA-Z]+\.)?(pragimtech)\.com$