表单在angular 2中未验证[ngClass]的用法

<form>
  <div class="form-group" [ngClass]="{'has-error': !username.valid && username.touched}">
    <label for="username">Username</label>
    <input type="text" id="username" class="form-control" required minlength="5" #username="ngModel">
    <div *ngIf="username.invalid && username.touched" class="error-message">Username is required and must be at least 5 characters long.</div>
  </div>
  
  <div class="form-group" [ngClass]="{'has-error': !password.valid && password.touched}">
    <label for="password">Password</label>
    <input type="password" id="password" class="form-control" required minlength="8" #password="ngModel">
    <div *ngIf="password.invalid && password.touched" class="error-message">Password is required and must be at least 8 characters long.</div>
  </div>
  
  <button type="submit" class="btn btn-primary" [disabled]="!username.valid || !password.valid">Submit</button>
</form>