Текстовое поле не становится красным при проверке формы Angular 2

Question

Так что у меня действительно странная проблема.Я использую Ionic с Angular 2 для проверки формы.Если я нажимаю на текстовое поле, появляется проверка, но текстовое поле не становится красным, но всякий раз, когда я щелкаю и снова нажимаю на текстовое поле, оно становится красным, поэтому после 2-х щелчков оно становится красным, и я не знаю решения для этого.

Форма:

<form [formGroup]="form"
      (ngSubmit)="addUser(form)">
  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input type="text"
               formControlName="username"
               required></ion-input>
  </ion-item>
  <div *ngIf="form.get('username').touched && form.get('username').invalid"
       class="alert alert-danger">
    <div *ngIf="form.get('username').hasError('required')">Naam moet ingevuld zijn.</div>
    <div *ngIf="form.get('username').hasError('pattern')">Ongeldige naam.</div>
    <div *ngIf="form.get('username').hasError('minLength')">Minder dan 5 letters gebruikt</div>
  </div>
</form>

И мое подтверждение:

ngOnInit() {
    this.form = new FormGroup({
      username: new FormControl('', [
        Validators.required,
        Validators.pattern('[a-zA-Z][a-zA-z ]+') /*, Validators.minLength(3)*/
      ]),
      password: new FormControl('', [
        Validators.required,
        Validators.minLength(5)
      ]),
      email: new FormControl('', [Validators.required, Validators.email])
    });
  }