表单验证角2中的文本框未变为红色

Question

所以我有一个很奇怪的问题。我在Angular 2中使用Ionic进行表单验证。如果我单击该文本框，则会显示验证，但该文本框不会变成红色，但是每当我单击并再次单击该文本框时，它就会变为红色，因此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])
    });
  }