angular - password matching(password and conform password) validation using ionic2 and angular2

Question

can any one help me for this validation,i am not understanding this.i am new to this angular2 and ionic2 .how to use this customvalidators ,please help me

 <form [formGroup]="passwordForm">
        <ion-list formGroupName="password">
        <ion-item>
            <ion-label floating>Old Password</ion-label>
            <ion-input type="text" value="" formControlName="oldpassword" [(ngModel)]="oldPasswd" required></ion-input>
        </ion-item>
        <ion-list formGroupName="matchingPassword">
        <ion-item>
            <ion-label floating>New Password</ion-label>
            <ion-input type="text" value="" formControlName="newpassword" [(ngModel)]="newPasswd" required></ion-input>
        </ion-item>

        <ion-item>
            <ion-label floating>Re-Enter Password</ion-label>
            <ion-input type="text" value="" formControlName="reenterpassword" [(ngModel)]="rePasswd" required></ion-input>
        </ion-item><br><br>
        </ion-list>
        </ion-list>
        </form>

        <button small (click)="changPassword();">Change Password</button>

.ts

constructor(private navCtrl: NavController, private users:Users,public _form: FormBuilder) {
    this.passwordForm = new FormGroup({
          password: new FormGroup({
            oldpassword: new FormControl('', [Validators.required,Validators.minLength(5),Validators.maxLength(10)]),
             matchingPassword: new FormGroup({
               newpassword: new FormControl('', [Validators.required,Validators.minLength(5),Validators.maxLength(10)]),
               reenterpassword: new FormControl('', this.customValidator),
              },,{validator: this.isEqual})
          })
     }); 


  }

 private customValidator(control: FormControl) {
            // check if control is equal to the password1 control
             return {isEqual: control.value === this.passwordForm.controls['newpassword'].value};
}

Answer 1

You can use below directive for validating password. You need to add directive to your main module declaration to use it :

HTML Form :

<form [formGroup]="passwordForm">
  <ion-item>
    <ion-label floating>New Password</ion-label>
    <ion-input type="text" formControlName="newpassword" [(ngModel)]="newPasswd" validateEqual="reenterpassword" reverse="true" required></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Re-Enter Password</ion-label>
    <ion-input type="text" formControlName="reenterpassword" [(ngModel)]="rePasswd" validateEqual="newpassword" required></ion-input>
    <div *ngIf="passwordForm.reenterpassword.errors.misMatched" class="form-error">Password do not match.</div>
  </ion-item>
</form>

equal-validator.directive.ts

import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector : '[validateEqual][formControlName],[validateEqual][ngModel]',
  providers: [
    {provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true}
  ]
})
export class EqualValidator implements Validator {
  constructor(@Attribute('validateEqual') public validateEqual: string,
              @Attribute('reverse') public reverse: string) {
  }

  private get isReverse() {
    if (!this.reverse) return false;
    return this.reverse === 'true' ? true : false;
  }

  validate(c: AbstractControl): { [key: string]: any } {
    // self value
    let v = c.value;

    // control vlaue
    let e = c.root.get(this.validateEqual);
    // value not equal
    if (e && v !== e.value && !this.isReverse) {
      return {
        misMatched: true
      }
    }

    // value equal and reverse
    if (e && v === e.value && this.isReverse) {
      delete e.errors['misMatched'];
      if (!Object.keys(e.errors).length) {
        e.setErrors(null);
      }
    }

    // value not equal and reverse
    if (e && v !== e.value && this.isReverse) {
      e.setErrors({
        misMatched: true
      })
    }
    return null;
  }
}