Cross field validation

Author: gopinav

reactive-forms/src/app/app.component.html

@@ -20,7 +20,8 @@ <h2>Registration Form</h2>
 
     <div class="form-group">
       <label>Confirm Password</label>
-      <input type="password" formControlName="confirmPassword" class="form-control">
+      <input type="password" [class.is-invalid]="registrationForm.errors?.misMatch" formControlName="confirmPassword" class="form-control">
+      <small class="text-danger" *ngIf="registrationForm.errors?.misMatch">Passwords do not match</small>
     </div>
 
     <div formGroupName="address">
@@ -47,5 +48,6 @@ <h2>Registration Form</h2>
 
   </form>
 
+  {{registrationForm.status | json}}
   {{registrationForm.value | json}}
 </div>

reactive-forms/src/app/app.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { FormBuilder } from '@angular/forms';
-import { Validators } from '@angular/forms';
-import { forbiddenNameValidator } from './shared/user-name.validator';
+import { ForbiddenNameValidator } from './shared/user-name.validator';
+import { PasswordValidator } from './shared/password.validator';
 
 @Component({
   selector: 'app-root',
@@ -23,15 +23,15 @@ export class AppComponent {
   // });
 
   registrationForm = this.fb.group({
-    userName: ['', [Validators.required, Validators.minLength(3), forbiddenNameValidator(/password/)]],
+    userName: ['', [Validators.required, Validators.minLength(3), ForbiddenNameValidator(/password/)]],
     password: [''],
     confirmPassword: [''],
     address: this.fb.group({
       city: [''],
       state: [''],
       postalCode: ['']
     })
-  });
+  }, {validator: PasswordValidator});
 
   get userName() {
     return this.registrationForm.get('userName');

reactive-forms/src/app/shared/password.validator.ts

@@ -0,0 +1,10 @@
+import { AbstractControl } from '@angular/forms';
+
+export function PasswordValidator(control: AbstractControl): { [key: string]: boolean } | null {
+  const password = control.get('password');
+  const confirmPassword = control.get('confirmPassword');
+  if (password.pristine || confirmPassword.pristine) {
+    return null;
+  }
+  return password && confirmPassword && password.value !== confirmPassword.value ? { 'misMatch': true } : null;
+}

reactive-forms/src/app/shared/user-name.validator.ts

@@ -1,6 +1,6 @@
 import { ValidatorFn, AbstractControl } from '@angular/forms';
 
-export function forbiddenNameValidator(forbiddenName: RegExp): ValidatorFn {
+export function ForbiddenNameValidator(forbiddenName: RegExp): ValidatorFn {
   return (control: AbstractControl): { [key: string]: any } | null => {
     const forbidden = forbiddenName.test(control.value);
     return forbidden ? { 'forbiddenName': { value: control.value } } : null;