title: Why doesn't my formGroup validator work as expected?
body: <p>I am tryng to do form validations and run into some issue, if I use angular email validator like this:</p>
  
  <pre><code>&lt;input type="email" class="mail" email name="emailField"  [(ngModel)]="email" #emailField="ngModel"&gt;
  </code></pre>
  
  <p>and put it into form by formGroup:</p>
  
  <pre><code>&lt;form  [formGroup]="myForm" (ngSubmit)="onSubmit(f.value)" &gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    &lt;input type="email" class="mail" email name="emailField"  [(ngModel)]="email" #emailField="ngModel"&gt;
          &lt;div  class="emailinvalid" *ngIf="emailField.invalid &amp;&amp; emailField.touched"&gt;
            &lt;span  *ngIf="emailField.hasError('email')"&gt;
              Please enter the correct email, this email not valid.
            &lt;/span&gt;
          &lt;/div&gt;
            &lt;br&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>in that way email-validation doesn't work, so I am looking for the way to fix it, here is my ts code:</p>
  
  <pre><code>export class ContactComponent  {
  
  
      myForm: FormGroup;
      email: string;
      username: string;
      surname: string;
      message: string;
  
  constructor(fb: FormBuilder) {
      this.myForm = fb.group({
        'username':  ['', Validators.required],
        'surname': ['', Validators.required],
        'message': ['', Validators.required],
  
      });
    }
   }
  </code></pre>
  
  <p><code>username</code>, <code>surname</code> and other inputs I use in my form(formGroup) above, I've just cut it off to clean the code a little in example.</p>