<div class="container">
  <div class="card card-container">
    <img id="profile-img" class="profile-img-card" src="assets/images/avatar_2x.png" />
    <form class="form-signin" (ngSubmit)="registerUser()" #registerForm="ngForm">
      <input type="text" id="uname" class="form-control" name="uname" #uname="ngModel" [(ngModel)]="userObject.uname"
        placeholder="Username" title="Please enter the username" autocomplete="off" required autofocus>
      <input type="password" id="upass" class="form-control" name="upass" placeholder="Password"
        title="Please enter the password" #upass="ngModel" autocomplete="off" [(ngModel)]="userObject.upass" required>
      <input type="password" id="confirmpass" class="form-control" name="confirmpass" placeholder="Confirm password"
        title="Please re-enter the password" #uconfirmpass="ngModel" autocomplete="off" [(ngModel)]="confirmPass"
        required>
      <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit"
        [disabled]="(uname?.errors?.required || upass?.errors?.required || uconfirmpass?.errors?.required) || (upass.value !== uconfirmpass.value)">Sign
        up</button>
        <p style="text-align:center;">Remember credentials? <a [routerLink]="['/login']">Login
          here</a></p>
      <p class="text-success" style="text-align:center;" *ngIf="errorMessage">{{errorMessage}}</p>
    </form>
  </div>
</div>