Fix password match validation

It must belong to FormGroup, not FormControl.

Author: akirasosa

src/app/core/forms/validator.spec.ts

@@ -1,4 +1,4 @@
-import {FormControl} from "@angular/forms";
+import {FormControl, FormGroup} from "@angular/forms";
 import {Validators} from "./validators";
 
 describe('Validator', () => {
@@ -7,8 +7,8 @@ describe('Validator', () => {
     it('validates the match of two controls', () => {
       const ctrl1 = new FormControl('test1');
       const ctrl2 = new FormControl('test2');
-      expect(Validators.match(ctrl1)(ctrl1)).toBeUndefined();
-      expect(Validators.match(ctrl1)(ctrl2)).toEqual({matched: false});
+      expect(Validators.match(ctrl1, ctrl1)(new FormGroup({}))).toEqual({});
+      expect(Validators.match(ctrl1, ctrl2)(new FormGroup({}))).toEqual({unmatched: true});
     });
   }); // .match
 

src/app/core/forms/validators.ts

@@ -2,10 +2,12 @@ import {FormControl, ValidatorFn} from "@angular/forms";
 
 export class Validators {
 
-  static match(c1:FormControl):ValidatorFn {
-    return (c2) => {
-      if (c1.value !== c2.value) return {matched: false};
+  static match(c1: FormControl, c2: FormControl): ValidatorFn {
+    return (): {[key: string]: any} => {
+      if (c1.value !== c2.value) return {unmatched: true};
+      return {};
     };
+
   }
 
 }

src/app/pages/+signup/signup.component.html

@@ -42,7 +42,7 @@ <h1>Sign up</h1>
        [class.has-danger]="!password.valid && password.touched">
     <label class="col-form-label" for="passwordInput">Password</label>
     <input
-      type="password"
+      type="text"
       class="form-control form-control-danger"
       id="passwordInput"
       placeholder="Password"
@@ -57,11 +57,11 @@ <h1>Sign up</h1>
   </div>
 
   <div class="form-group"
-       [class.has-danger]="!passwordConfirmation.valid && passwordConfirmation.touched">
+       [class.has-danger]="(!passwordConfirmation.valid || myForm.hasError('unmatched')) && passwordConfirmation.touched">
     <label class="col-form-label" for="passwordConfirmationInput">Confirm
       Password</label>
     <input
-      type="password"
+      type="text"
       class="form-control form-control-danger"
       id="passwordConfirmationInput"
       placeholder="Confirm Password"
@@ -71,7 +71,7 @@ <h1>Sign up</h1>
       class="form-control-feedback">Password confirmation is required
     </div>
     <div
-      *ngIf="passwordConfirmation.hasError('matched') && passwordConfirmation.touched"
+      *ngIf="myForm.hasError('unmatched') && passwordConfirmation.touched"
       class="form-control-feedback">Doesn't match
     </div>
   </div>

src/app/pages/+signup/signup.component.spec.ts

@@ -97,12 +97,12 @@ describe('SignupComponent', () => {
         body: JSON.stringify({token: 'my jwt'}),
       })));
     });
-    page.onSubmit({
-      email: '[email protected]',
-      password: 'secret',
-      name: 'akira',
-    });
-    expect(authService.login).toHaveBeenCalledWith('[email protected]', 'secret');
+    page.name.setValue('akira', {});
+    page.email.setValue('[email protected]', {});
+    page.password.setValue('secret123', {});
+    page.passwordConfirmation.setValue('secret123', {});
+    cmpDebugElement.query(By.css('button')).nativeElement.click();
+    expect(authService.login).toHaveBeenCalledWith('[email protected]', 'secret123');
     advance(fixture);
     expect(location.path()).toEqual('/home');
   }));

src/app/pages/+signup/signup.component.ts

@@ -5,6 +5,7 @@ import {EMAIL_PATTERN, Validators as AppValidators} from "../../core/forms";
 import {UserService} from "../../core/services/user.service";
 import {AuthService} from "../../core/services/auth.service";
 import {ToastService} from "../../core/toast/toast.service";
+import values from "lodash/values";
 
 @Component({
   selector: 'mpt-signup',
@@ -29,6 +30,10 @@ export class SignupComponent implements OnInit {
   }
 
   onSubmit(params) {
+    values(this.myForm.controls).forEach(c => c.markAsTouched());
+
+    if (!this.myForm.valid) return;
+
     this.userService.create(params)
       .mergeMap(() => {
         return this.authService.login(params.email, params.password);
@@ -54,14 +59,13 @@ export class SignupComponent implements OnInit {
     ]));
     this.passwordConfirmation = new FormControl('', Validators.compose([
       Validators.required,
-      AppValidators.match(this.password),
     ]));
     this.myForm = new FormGroup({
       name: this.name,
       email: this.email,
       password: this.password,
       passwordConfirmation: this.passwordConfirmation,
-    });
+    }, AppValidators.match(this.password, this.passwordConfirmation));
   }
 
   private handleError(error) {

src/app/pages/+user-edit/user-edit.component.html

@@ -54,7 +54,7 @@ <h1>Update your profile</h1>
   </div>
 
   <div class="form-group"
-       [class.has-danger]="!passwordConfirmation.valid && passwordConfirmation.touched">
+       [class.has-danger]="(!passwordConfirmation.valid || myForm.hasError('unmatched')) && passwordConfirmation.touched">
     <label class="col-form-label" for="passwordConfirmationInput">Confirm
       Password</label>
     <input
@@ -64,7 +64,7 @@ <h1>Update your profile</h1>
       placeholder="Confirm Password"
       formControlName="passwordConfirmation"/>
     <div
-      *ngIf="passwordConfirmation.hasError('matched') && passwordConfirmation.touched"
+      *ngIf="myForm.hasError('unmatched') && passwordConfirmation.touched"
       class="form-control-feedback">Doesn't match
     </div>
   </div>

src/app/pages/+user-edit/user-edit.component.ts

@@ -3,6 +3,7 @@ import {FormGroup, FormControl, Validators} from "@angular/forms";
 import {ActivatedRoute} from "@angular/router";
 import isEmpty from "lodash/isEmpty";
 import omitBy from "lodash/omitBy";
+import values from "lodash/values";
 import {User} from "../../core/domains";
 import {UserService} from "../../core/services/user.service";
 import {EMAIL_PATTERN, Validators as AppValidators} from "../../core/forms";
@@ -35,8 +36,8 @@ export class UserEditComponent implements OnInit {
   }
 
   onSubmit(params) {
-    this.passwordConfirmation.updateValueAndValidity({});
-    this.passwordConfirmation.markAsTouched();
+    values(this.myForm.controls).forEach(c => c.markAsTouched());
+
     if (!this.myForm.valid) return;
 
     this.userService.updateMe(omitBy(params, isEmpty))
@@ -57,15 +58,13 @@ export class UserEditComponent implements OnInit {
     this.password = new FormControl('', Validators.compose([
       Validators.minLength(8),
     ]));
-    this.passwordConfirmation = new FormControl('', Validators.compose([
-      AppValidators.match(this.password),
-    ]));
+    this.passwordConfirmation = new FormControl('');
     this.myForm = new FormGroup({
       name: this.name,
       email: this.email,
       password: this.password,
       passwordConfirmation: this.passwordConfirmation,
-    });
+    }, AppValidators.match(this.password, this.passwordConfirmation));
   }
 
   private handleError(error) {

src/vendor.ts

@@ -2,8 +2,11 @@ import "rxjs/add/operator/map";
 import "rxjs/add/operator/mergeMap";
 import "rxjs/add/operator/finally";
 import "rxjs/add/operator/do";
-import "bootstrap/dist/css/bootstrap.css";
+import "lodash/values";
+import "lodash/isEmpty";
+import "lodash/omitBy";
 import "jwt-decode";
+import "bootstrap/dist/css/bootstrap.css";
 
 if ('production' === ENV) {
 } else {