密碼匹配（密碼和確認密碼）驗證使用ionic2和angular2

Question

可以任何一個幫助我進行此驗證，我不瞭解this.i新到這個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> 

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