Не могу сбросить ввод при отправке и отправке значения при использовании formControl

Question

Когда я пытаюсь отправить форму, «электронная почта» не отображается в консоли, но когда я удаляю formControl, это работает нормально, но тогда мой ввод по электронной почте не ложный.Подскажите, как это решить?

<form (ngSubmit)="onSubmit(f)" #f="ngForm" >
<div class="example-container">
  <mat-form-field>
    <input class="form" ngModel name="Name" matInput placeholder="Name" required>
  </mat-form-field>
  <mat-form-field>
    <input [formControl]="email" class="form" ngModel name="email" matInput placeholder="Enter your email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
  <mat-form-field >
    <input class="form" ngModel [type]="hide ? 'password' : 'text'" name="Password" matInput placeholder="Password" required>
    <mat-icon matSuffix  minlength="5" (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
  </mat-form-field>

  <mat-form-field>
    <mat-select placeholder="Select Role" name="Role" ngModel required>
      <mat-option value="master">Master</mat-option>
      <mat-option value="driver">Driver</mat-option>
      <mat-option value="receptionist">Receptionist</mat-option>
    </mat-select>
  </mat-form-field>
  <button type="submit" class="btn btn-success" [disabled]="!f.valid">Register</button>
</div>

</form>

email = new FormControl('', [Validators.required, Validators.email]);
  hide = true;
  constructor() { }

  ngOnInit() {
  }
  onSubmit(f) {
    console.log(f.value);
    f.reset();
    console.log(f.get('email'));
  }

  getErrorMessage() {
    return this.email.hasError('required') ? 'You must enter a value' :
        this.email.hasError('email') ? 'Not a valid email' :
            '';
  }