<div class="container">
  <div [hidden]="submitted">
    <h1>Log In</h1>
    <form #logInForm="ngForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="username">Username</label>
        <input #username="ngModel" [(ngModel)]="model.username" class="form-control"
               id="username"
               name="username" required
               type="text">
        <div [hidden]="username.valid || username.pristine"
             class="alert alert-danger">
          Username is required
        </div>
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input #password="ngModel" [(ngModel)]="model.password" class="form-control"
               id="password"
               name="password" required
               type="password">
        <div [hidden]="password.valid || password.pristine"
             class="alert alert-danger">
          Password is required
        </div>
      </div>

      <button [disabled]="!logInForm.form.valid" class="mt-2 btn btn-success" type="submit">Login</button>
      <button (click)="resetForm(); logInForm.reset()" class="mt-2 ms-2 btn btn-danger" type="button">Reset Form</button>
    </form>
  </div>
</div>