regex - Angular2 form validation with pattern -

i'm trying user pattern attribute email in angular 4.3.0 field.errors.pattern returns true when email correct. i'm working on existing code , pattern used in this.i'm not able understand regex.

below html form

<form #loginform="ngform" class="form-horizontal  b bg-white padding_default r-2x box-shadow" novalidate role="form">      <div class="text-danger wrapper text-center" *ngif="autherror">      </div>     <div class="animated fadein">         <div class=" m-b-md no-border ">             <input id="username" type="email" class="form-control input-lg b  text-md" name="username" placeholder="email" [(ngmodel)]="logindata.email"                 autofocus required #username="ngmodel" pattern="emailpattern">             <div *ngif="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">                 <div *ngif="username.errors.required">                     name required.                 </div>                 <div *ngif="username.errors.pattern">                     name invalid                 </div>              </div>             <!--<div class="sxo_validate_msg text-danger text-sm" *ngif="username.touched && isvalidemail">                             <span>invalid email address.</span>                         </div>-->         </div>          <div class=" m-b-md no-border">             <input id="password" type="password" class="form-control input-lg b b-light text-md" name="password" [(ngmodel)]="logindata.password"                 placeholder="password" required #password="ngmodel">             <div class="text-danger sxo_validate_msg text-sm" *ngif="password.dirty && password.invalid">                 <span *ngif="password.required">password required.</span>             </div>         </div>          <div class="m-b-md m-t-md">             <label class="i-checks text-sm">                 <input name="rememberme" id="login-remember" type="checkbox" [(ngmodel)]="logindata.rememberme"><i></i> <a href="#">remember me</a>             </label>         </div>          <div class="controls m-t-md">              <div class="m-b-lg" *ngif="showcaptche">                 <re-captcha [site_key]="model.key" (captcharesponse)="setresponse($event)"></re-captcha>                  <!--<div vc-recaptcha                                 theme="'light'"                                 key="model.key"                                 on-create="setwidgetid(widgetid)"                                 on-success="setresponse(response)"                                 on-expire="cbexpiration()"></div>-->             </div>             <input class="btn btn-lg btn-dark btn-block" value="login" (click)="login()" [disabled]="!loginform.form.valid" />             <div [hidden]="!message" class="alert alert-danger sxo_validate_msg p-t-xs p-b-xs">                 {{message}}             </div>         </div>     </div>   </form> 

below pattern

emailpattern:any =  new regexp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])|(([a-z]|\d|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])([a-z]|\d|-|\.|_|~|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])*([a-z]|\d|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])))\.)+(([a-z]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])|(([a-z]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])([a-z]|\d|-|\.|_|~|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])*([a-z]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])))\.?$/i); 

i have encounter same problem , don't know why regex seems not working in angular 4 project. start using validators in angular's formgroup , email validation works charm in project.

here's snippet of code edit profile page (edit-profile.component.html):

<form [formgroup]="editprofileform" class="form-horizontal" (ngsubmit)="editprofile()" >     <div class="form-group">        <label for="email" class="col-md-4 control-label">e-mail address </label>        <div class="col-md-6">           <input id="email" type="email" class="form-control" formcontrolname="email" [(ngmodel)]="user.email" required autofocus >        </div>     </div>     <span class="help-block">        <strong>{{ errors.email }}</strong>     </span>     <div class="form-group">        <div class="col-md-6 col-md-offset-4">           <button type="submit" class="btn btn-primary" [disabled]="editprofileform.pristine">             update           </button>        </div>     </div> </form> 

and in edit-profile.component.ts file:

import { ngform, formgroup, formbuilder, formarray, formcontrol, validators } '@angular/forms';    private errors = {       email: '',   };    public editprofileform: formgroup;    constructor(     private fb: formbuilder,   ) {     this.createform();   }    createform() {     // constructor + form validator     this.editprofileform = this.fb.group({       email: ['', validators.compose([validators.required, validators.email])],     });    }     editprofile() {     if (this.editprofileform.invalid) {       if (this.editprofileform.controls['email'].haserror('required')) {         this.errors.email = 'e-mail name cannot empty';       } else if (this.editprofileform.controls['email'].haserror('email')) {         this.errors.email = 'e-mail not valid';       }      } else {     // submit form     }   } 

hope helps!