Display password mismatch error

marvac · Jan 28, 2019 · edb9c93 · edb9c93
1 parent 5e79b8a
commit edb9c93
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/Client/src/app/components/register/register.component.html b/Client/src/app/components/register/register.component.html
@@ -23,7 +23,17 @@ <h2 class="text-center text-primary">Sign Up</h2>
   </div>
 
   <div class="form-group">
-    <input type="password" formControlName="confirmPassword" class="form-control" placeholder="Confirm Password">
+    <input [ngClass]="{'is-invalid':(registerForm.get('confirmPassword').errors &&
+           registerForm.get('confirmPassword').touched) ||
+           (registerForm.hasError('mismatch') &&
+           registerForm.get('confirmPassword').touched)}"
+           type="password"
+           formControlName="confirmPassword"
+           class="form-control"
+           placeholder="Confirm Password">
+
+    <div *ngIf="registerForm.get('confirmPassword').hasError('required') && registerForm.get('confirmPassword').touched" class="invalid-feedback">Password is required</div>
+    <div *ngIf="registerForm.hasError('mismatch') && registerForm.get('confirmPassword').touched" class="invalid-feedback">Passwords must match</div>
   </div>
 
   <div class="form-group text-center">