Why doesn't my formGroup validator work as expected?

I am tryng to do form validations and run into some issue, if I use angular email validator like this:

<input type="email" class="mail" email name="emailField"  [(ngModel)]="email" #emailField="ngModel">

and put it into form by formGroup:

<form  [formGroup]="myForm" (ngSubmit)="onSubmit(f.value)" >

    <input type="email" class="mail" email name="emailField"  [(ngModel)]="email" #emailField="ngModel">
        <div  class="emailinvalid" *ngIf="emailField.invalid && emailField.touched">
          <span  *ngIf="emailField.hasError('email')">
            Please enter the correct email, this email not valid.
          </span>
        </div>
          <br>
  </form>

in that way email-validation doesn't work, so I am looking for the way to fix it, here is my ts 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],

    });
  }
 }

username, surname and other inputs I use in my form(formGroup) above, I've just cut it off to clean the code a little in example.