0

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};
}

1 Answer 1

2

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;
  }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.