<form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()">
  <p>
    <mat-form-field>
      <mat-label>Username</mat-label>
      <input matInput formControlName="username" [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }">
      <mat-error *ngIf="formCtrls.username.hasError('required')">
        Username is required
      </mat-error>
      <mat-error *ngIf="formCtrls.username.hasError('minlength')">
        Username must have min 3 characters
      </mat-error>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field>
      <mat-label>Password</mat-label>
      <input type="password" matInput formControlName="password"
        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }">
      <mat-error *ngIf="formCtrls.password.hasError('required')">
        Password is required
      </mat-error>
      <mat-error *ngIf="formCtrls.password.hasError('pattern')">
        The pattern of the password ([A-Za-z0-9_-] {{ '{' }}8,15{{ '}' }})
      </mat-error>
    </mat-form-field>
  </p>

  <button [disabled]="loading" mat-raised-button color="accent">
    <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
    Login
  </button>

  <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
</form>
