<div class="container">
    <h4>Register</h4>

    <form #myForm="ngForm">
      <div class="form-group">
        <input
          [(ngModel)]="userName"
          name="userName"
          type="text"
          class="form-control"
          placeholder="Enter username"
          minlength="5"
          required
          #refUserName = "ngModel">
          <div *ngIf="refUserName?.errors?.required" class="alert alert-danger">
            Username is Required
          </div>
          <div *ngIf="refUserName?.errors?.minlength" class="alert alert-danger">
              Min 5 characters are Required
          </div>
      </div>
      <div class="form-group">
        <input
          [(ngModel)]="password"
          name="password"
          type="password"
          class="form-control"
          placeholder="Password"
          #refPassword="ngModel"
          required>
          <div *ngIf="refPassword?.errors?.required" class="alert alert-danger">
              Password is Required
          </div>
      </div>
      <button
        type="submit"
        class="btn btn-primary btn-block"
        [disabled]="myForm.invalid">
        Register</button>
    </form>