<div class="container">
  <h4>Register into {{appTitle}}</h4>

  <form #myForm="ngForm"
    (ngSubmit)="register(myForm.value)">
    <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
            && (refUserName.dirty ||refUserName.touched)"
          class="alert alert-danger">
          Username is required.
        </div>
        <div
          *ngIf="refUserName?.errors?.minlength
          && (refUserName.dirty ||refUserName.touched)"
          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"
        required
        #refPassword="ngModel">
        <div
          *ngIf="refPassword?.errors?.required &&
       (refPassword.dirty ||refPassword.touched)"
        class="alert alert-danger">
          Password is required.
        </div>
    </div>
    <button
      type="submit"
      class="btn btn-primary btn-block"
      [disabled]="myForm.invalid">
      Register</button>
  </form>
</div>