Email validation is not working in angular 2 form validation

Question

I have created a signup form. In that the email validation is not working!!

here is the code:-

HTML page

 <form [formGroup]="myForm"  (ngSubmit)="submit()" >
 <ion-item>
    <ion-label primary floating>EMAIL</ion-label>
    <ion-input type="email" id="email"  class="form-control" formControlName="email" ></ion-input>
</ion-item>
    <p *ngIf="myForm.controls.email.errors && myForm.controls.email.dirty "  class="alert alert-danger">
      <small class="up"> <i>Enter Valid Email Address!</i></small></p>

ts file:-

 this.myForm = formBuilder.group({
       'email' : new FormControl('', [Validators.required, Validators.pattern(required pattern=("^[a-zA-Z0–9_.+-]+@[a-zA-Z0–9-]+.[a-zA-Z0–9-.]+$)"])
 }

When i enter some data in form they get valid!! Does not validating the email!

score 6 · Answer 1 · answered Dec 15 '16 at 19:06

Hi Here is working email pattern and email validation with login form what I have used in my application

In your HTML

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)">
 <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['usermail'].valid && signinForm.controls['usermail'].touched}">
  <label>Email Address</label>
  <input class="form-control" type="email" [formControl]="signinForm.controls['usermail']">
  <span *ngIf="signinForm.controls['usermail'].hasError('required') && signinForm.controls['usermail'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Email</span>
  <span *ngIf="signinForm.controls['usermail'].hasError('pattern') && signinForm.controls['usermail'].touched" class="required pull-right">*Invalid Email</span>
</div>
<div class="form-group" [ngClass]="{'has-error':!signinForm.controls['userpass'].valid && signinForm.controls['userpass'].touched}">
   <label>Password</label>
   <input class="form-control" type="password" [formControl]="signinForm.controls['userpass']" (focus)="showErrorMessage=false">
    <span *ngIf="signinForm.controls['userpass'].hasError('required') && signinForm.controls['userpass'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Password</span>
 </div>
 <button type="submit" class="btn btn-pri mds_btn" [disabled]="!signinForm.valid">Login</button>       
</form>

In your Component

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: [ './login.component.scss' ]
})
export class LoginComponent {
   myForm: FormGroup;

   emailRegex: any = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
   passRegex:any ='^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$'; 

   constructor(fb: FormBuilder) {

    this.myForm = fb.group({
      'logmail': [ null, Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) ],
     'logpass': [ null, Validators.compose([ Validators.required, Validators.pattern(this.passRegex) ]) ]
  });

  this.myForm.valueChanges.subscribe((form: any) => {
   });
 }

 submitForm(lgvalue: any) {
     //do logic here after submitting the form

  }
 }

In this example, I have used emailRegex which is valid email pattern if you want you can develop your own pattern here http://www.html5pattern.com/

@SelvaKumarDuraisamy if this answer helped you please upvote or give a green mark. :) — Malhari, Dec 16 '16 at 06:25

score 2 · Answer 2 · answered Apr 13 '17 at 17:22

Since Angular 4, you can add the email directive to your input control to validate the email address.

Then, feel free to display an error using the email key.

<div *ngIf="email.errors && (email.dirty || email.touched)">
  <div [hidden]="!email.errors.email">
    The email address is incorrect.
  </div>
</div>

score 1 · Answer 3 · edited May 23 '17 at 10:31

The first thing is that your usage of the Validators.pattern is grossly incorrect and should be:

'email' : new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0–9_.+-]+@[a-zA-Z0–9-]+.[a-zA-Z0–9-.]+$/i])

The second is that the provided regex does not even parse as a valid regular expression when it's used, so instead we'll go do some research and then use: /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i

which is still imperfect so we'll read more about regex and email and then be horrified.

Here's a Plunker demo.

jahmed31 · Answer 4 · 2017-10-05T10:22:09.300

in .ts file

valForm: FormGroup;

constructor(fb: FormBuilder) { this.valForm = fb.group({ 
'email': [null, Validators.compose([Validators.required 
,Validators.pattern(email_pattern)])]
}); }

in .html

<span class="text-danger" *ngIf="valForm.controls['email'].hasError('required') && (valForm.controls['email'].dirty || valForm.controls['email'].touched)">This field is required</span>
<span class="text-danger" *ngIf="valForm.controls['user_role'].hasError('required') && (valForm.controls['user_role'].dirty || valForm.controls['user_role'].touched)">This field is required</span>

make sure you have import FormBuilder, FormGroup as well the Validators.

Email validation is not working in angular 2 form validation

4 Answers4