Angular Email Validation

Angular Email Validation

A directive that adds the email validator to controls set apart with the email characteristic. The mandate is given the NG_VALIDATORS multi-supplier list. Email Validation in JavaScript

Angular Email Validation using Template-driven form

[email][formControlName]
[email][formControl]
[email][ngModel]


<input type="email" name="email" ngModel email>
<input type="email" name="email" ngModel email="true">
<input type="email" name="email" ngModel [email]="true"> 

Angular Email Validation using Reactive form

userForm = this.formBuilder.group({
   primaryEmail: ['', Validators.email],
   secondaryEmail: '',
}); 

this.userForm.get('secondaryEmail').setValidators(Validators.email); 

get primaryEmail() {
    return this.userForm.get('primaryEmail');
} 
<input formControlName="primaryEmail">
<div *ngIf="primaryEmail.errors?.email">
     Primary Email not valid.
</div> 

<input formControlName="secondaryEmail">
<div *ngIf="secondaryEmail.errors?.email">
     Secondary Email not valid.
</div> 

Angular Email Validation using PatternValidator

emailPattern = "^[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$";
userForm = this.formBuilder.group({
    officialEmail: ['', [Validators.required, Validators.pattern(this.emailPattern)]]
}); 

get officialEmail() {
    return this.userForm.get('officialEmail');
}
<input formControlName="officialEmail">
<div *ngIf="officialEmail.errors"> 
   <div *ngIf="officialEmail.errors.required">
       Official Email required.
   </div> 		   
   <div *ngIf="officialEmail.errors.pattern">
       Official Email not valid.
   </div> 
</div>
<input formControlName="officialEmail" required [pattern]="emailPattern"> 

reactive-form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormBuilder, Validators } from '@angular/forms';
import { UserService } from './user-service';
import { User } from './user';

@Component({
    selector: 'app-reactive',
    templateUrl: './reactive-form.component.html'
})

export class ReactiveFormComponent implements OnInit {

    isValidFormSubmitted = null;
    emailPattern = "^[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$";
    userForm = this.formBuilder.group({
        primaryEmail: ['', Validators.email],
        secondaryEmail: '',
        officialEmail: ['', [Validators.required, Validators.pattern(this.emailPattern)]]
    });
    user = new User();
    constructor(private formBuilder: FormBuilder, private userService: UserService) {

    }

    ngOnInit() {
        this.userForm.get('secondaryEmail').setValidators(Validators.email);
    }

    onFormSubmit() {
        this.isValidFormSubmitted = false;
        if (this.userForm.invalid) {
            return;
        }
        this.isValidFormSubmitted = true;
        this.user = this.userForm.value;
        this.userService.createUser(this.user);
        this.userForm.reset();
    }

    get primaryEmail() {
        return this.userForm.get('primaryEmail');
    }

    get secondaryEmail() {
        return this.userForm.get('secondaryEmail');
    }

    get officialEmail() {
        return this.userForm.get('officialEmail');
    }

} 

reactive-form.component.html

<h3>Template-driven Form</h3>
<p *ngIf="isValidFormSubmitted" [ngClass]="'success'">
    Form submitted successfully.
</p>

<form #userForm="ngForm" (ngSubmit)="onFormSubmit(userForm)">
    <table>
        <tr>
            <td>Primary Email:</td>
            <td>
                <input name="primaryEmail" [ngModel]="user.primaryEmail" email #prmEmail="ngModel">
                <div *ngIf="prmEmail.errors && userForm.submitted && !isValidFormSubmitted" [ngClass]="'error'">
                    <div *ngIf="prmEmail.errors.email">
                        Primary Email not valid.
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Secondary Email:</td>
            <td>
                <input name="secondaryEmail" [ngModel]="user.secondaryEmail" [email]="validateEmail"
                    #secEmail="ngModel">
                <div *ngIf="secEmail.errors && userForm.submitted && !isValidFormSubmitted" [ngClass]="'error'">
                    <div *ngIf="secEmail.errors.email">
                        Secondary Email not valid.
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Official Email:</td>
            <td>
                <input name="officialEmail" [ngModel]="user.officialEmail" required [pattern]="emailPattern"
                    #offEmail="ngModel">
                <div *ngIf="offEmail.errors && userForm.submitted && !isValidFormSubmitted" [ngClass]="'error'">
                    <div *ngIf="offEmail.errors.required">
                        Official Email required.
                    </div>
                    <div *ngIf="offEmail.errors.pattern">
                        Official Email not valid.
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button>Submit</button>
            </td>
        </tr>
    </table>
</form>