<div class="row">
  <div class="col-md-4 col-md-offset-4">
      <div *ngIf="errorMessage" class="alert alert-danger">{{ errorMessage }}</div>
    <form (submit)="onLogin()">
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" name="username" [(ngModel)]="creds.username" #username="ngModel" required/>
          <div class="text-danger" *ngIf="username.touched && username.invalid">Required</div>
      </div>
      <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control" name="password" [(ngModel)]="creds.password" #password="ngModel" required />
          <div class="text-danger" *ngIf="password.touched && password.invalid">Password is required</div>
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-success" value="Login" [disabled]="username.invalid || password.invalid" />
        <a href="#" class="btn btn-default">Cancel</a>
      </div>
    </form>
      {{ creds | json }}
  </div>
</div>