使用 ionic 和 Angular 2 进行密码匹配（密码和确认密码）验证

Question

谁能帮我做这个验证，我不明白这个。我是这个angular2和ionic2的新手。如何使用这个customvalidators，请帮助我

 <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

您可以使用以下指令来验证密码。您需要在主模块声明中添加指令才能使用它：

HTML 表单：

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