How to do email Validation in Angular?

Hi Sanjit,

There are many way for email validating .You can do it very simple. I am provide some code read it and use it. If you want to more detail about it and some links are given below end of the code.

<div class="alert-email">
<label>Emaillabel>
<input
id="contactemail"
type="text"
#contactemail="ngModel"
[(ngModel)]="model.contactemail"
required
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
<div class="md-errors-spacer" [hidden]="contactemail.valid || contactemail.untouched">
<div *ngIf="contactemail.errors && contactemail.errors.required">
Email is required
div>
<div *ngIf="contactemail.errors && contactemail.errors.pattern">
Email is invalid
div>
div>
div>

<div class="form-group" [ngClass]="{
'has-danger': email.invalid && (email.dirty || email.touched),
'has-success': email.valid && (email.dirty || email.touched)}">
<label class="form-control-label" for="email">Emaillabel>
<input type="email" class="form-control" emailvalidator id="email" name="email" [(ngModel)]="lecturer.email" required
#email="ngModel">
<div class="form-control-feedback" *ngIf="email.errors && (email.dirty || email.touched)">
<p *ngIf="email.errors.required">Email is requiredp>
<p *ngIf="email.errors.emailvalidator">Please provide a valid email addressp>
div>
div>

https://codeburst.io/angular-4-custom-validation-for-template-based-forms-b7dee9be48a6

https://www.concretepage.com/angular-2/angular-2-4-email-validation-example

https://angular.io/api/forms/EmailValidator

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Amit Kumar7y ago
Accepted answer
Hi Sanjit,
There are many way for email validating .You can do it very simple. I am provide some code read it and use it. If you want to more detail about it and some links are given below end of the code.

1.
<div class="alert-email">
        <label>Emaillabel>
            <input
                id="contactemail"
                type="text"
                #contactemail="ngModel"
                [(ngModel)]="model.contactemail"
                required
                pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

        <div class="md-errors-spacer" [hidden]="contactemail.valid || contactemail.untouched">
            <div  *ngIf="contactemail.errors && contactemail.errors.required">
                Email is required
            div>
            <div  *ngIf="contactemail.errors && contactemail.errors.pattern">
                Email is invalid
            div>
        div>
    div>
2.
<div class="form-group" [ngClass]="{
'has-danger': email.invalid && (email.dirty || email.touched),
'has-success': email.valid && (email.dirty || email.touched)}">
<label class="form-control-label" for="email">Emaillabel>
<input type="email" class="form-control" emailvalidator id="email" name="email" [(ngModel)]="lecturer.email" required
#email="ngModel">
<div class="form-control-feedback" *ngIf="email.errors && (email.dirty || email.touched)">
<p *ngIf="email.errors.required">Email is requiredp>
<p *ngIf="email.errors.emailvalidator">Please provide a valid email addressp>
div>
div>
https://codeburst.io/angular-4-custom-validation-for-template-based-forms-b7dee9be48a6

https://www.concretepage.com/angular-2/angular-2-4-email-validation-example

https://angular.io/api/forms/EmailValidator
+1
Amit Kumar7y ago
Hi if your problem is sort out then as as accept my answer true.
+1
Puneet Kankar7y ago
Please check below links.

https://www.youtube.com/watch?v=DNqZ7Du_64Y

https://www.concretepage.com/angular-2/angular-2-4-email-validation-example

https://www.code-sample.com/2017/10/angular-4-email-validator-in-formgroup_24.html
+1
Manoj Bhoir7y ago
Hi,

You can use EmailValidator directive for basic email validation in Angular.

Check this link for more information :

https://angular.io/api/forms/EmailValidator

https://stackoverflow.com/questions/49182864/angular-5-form-validation-e-mail
+1