title: Angular2-email validation not working properly
body: <p>I have an email component in angular2 where I have to validate below things.</p>
  
  <pre><code>1)The email has a localpart on the left of an @, the domain on the right. Neither the localpart nor the domain may be empty 
  2)Domain part can have any alphanumeric values
  3)Local part have any any alphanumerics and special characters Dot, underscore, hyphen.
  4)Domain part can have min 2 and max 4 characters affter the dot.
  5)No two consecutive dots are allowed in local part.
  6)Only special characters allowed are @,_,- and Dot
  </code></pre>
  
  <p>In my template-</p>
  
  <pre><code>&lt;div class="controls"&gt;
              &lt;md-input maxlength="60" placeholder="Customer Email" name="contactEmail" [(ngModel)]="emailProposal.customerEmail" #contactEmail="ngModel" id="contactEmail" (focus)="v_email=true;" (focusout)="v_email=false;"pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$"
                  required&gt;&lt;/md-input&gt;
              &lt;div *ngIf="!v_email &amp;&amp; contactEmail.errors &amp;&amp; (contactEmail.dirty || contactEmail.touched || sendEmailClicked)"&gt;
                  &lt;span class="validation-error-inline" *ngIf="!v_email &amp;&amp; contactEmail.errors.required"&gt;{{errorMessages.contactEmailRequired}}&lt;/span&gt;
                  &lt;span class="validation-error-inline" *ngIf="!v_email &amp;&amp; contactEmail.errors.pattern &amp;&amp; (emailProposal?.customerEmail?.indexOf('...')==-1)"&gt;{{errorMessages.enterValidEmail}}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>In my .ts-</p>
  
  <pre><code>@Input() emailSent: { customerEmail: string, confirmCustomerEmail: string, bindData: any };
  @Output() onEmailQuote = new EventEmitter();
  
  
  private errorMessages: { [key: string]: string } = {
          contactEmailRequired: "This field is required.",            
          enterValidEmail: "Enter valid Customer email address.",           
      }
  
  validateEmail(email) {
     var re = /^(([^&lt;&gt;()\[\]\.,;:\s@\"]+(\.[^&lt;&gt;()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^&lt;&gt;()[\]\.,;:\s@\"]+\.)+[^&lt;&gt;()[\]\.,;:\s@\"]{2,})$/i; // regEx to check valid email
     return re.test(email.customerEmail);        
    }
  
  
  
   private sendEmail() {    
          if (this.validateEmail(this.emailProposal) &amp;&amp; this.hasMismatch() === false) { //allow the service call only when emails are valid               
              this.onEmailQuote.emit(this.emailSent);
          }
  </code></pre>
  
  <p>My regEx above is not meeting the 6 points mentioned above.Can someone help me with the correct regEx which meets the above 6 validation rules.I am displaying error messages only when user tabs out the field or try to hit send button with invalid email.The email should be sent only when valid email is entered.Any help is much appreciated.</p>