title: Angular 4 reactive form Email validation by regular expression fail
body: <p>I'm using a reactive form to get user input. Not satisfied with the <code>EmailValidator</code> I'm using a pattern. </p>
  
  <pre><code>emailRegEx = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
  this.email = new FormControl('', [Validators.required, Validators.pattern(emailRegEx)]);
  </code></pre>
  
  <p>And the HTML:  </p>
  
  <pre><code>&lt;input type="email" formControlName="email" [ngClass]="contactForm.get('email').errors &amp;&amp; (contactForm.get('email').dirty || isButtonClicked) ? 'contact-input input-error' : 'contact-input'"&gt;
  </code></pre>
  
  <p>But here's the thing, for some reason the regex is accepting 4 chars after the <code>@</code>, without a period.
  <code>name@d</code> --> error<br>
  <code>name@doma</code> --> no error<br>
  <code>name@domain.</code> --> error<br>
  <code>name@domain.com</code> --> no error</p>
  
  <p>I checked this regex in multiple online regex testers, and they all only accept the last example above, none of them accept the second one.  </p>
  
  <p>EDIT:<br>
  The regular expression is fine and works well, the problem is that somehow the pattern validator isn't parsing the regex correctly, or something.</p>