MEAN Cookbook

New email form input validator directive

When handling email inputs in Angular you usually want to validate the format of input before doing anything else with it. This validation could be handled in several ways but one of the most common was simply adding a regular expression match to the input with the pattern directive:

<form #form="ngForm">  <input type="email"         ngModel         name="email"         required         pattern="^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$">  <button [disabled]="!form.valid">Submit</button></form>

This approach works, but obviously, introduces a very ugly regular expression right into the middle of our template. If we had many different instances of email input fields in our application, we would quickly find ourselves duplicating this regular ...