使用ionic2和angular2进行密码匹配（密码和符合密码）验证

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表单：

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

等于-validator.directive.ts

$subject = ActiveCurriculum::find()
    ->select('scstock.*')
    ->joinWith('schead')
    ->where(['schead.TrNo' => $TrNo])
    ->one();

$activesubject              = new ActiveSubject();
$activesubject->clientid    = $clientid;
$activesubject->TrNo        = $subject->TrNo;
$activesubject->LINE        = $subject->LINE;
$activesubject->period      = $subject->schead->period;
$activesubject->subjectcode = $subject->subjectcode;
$activesubject->schedday    = $subject->schedday;
$activesubject->schedtime   = $subject->schedtime;
//remember to use schead if the value is joined from another table.
$activesubject->section  = $subject->schead->section;
$activesubject->roomcode = $subject->roomcode;
$activesubject->units    = $subject->units;
$activesubject->save();

//reduces the slot of ccsubject by 1
$subject->slots = $subject->slots - 1;
//never forget the saving part
$subject->save();