黄兵的个人博客

Angular 确认密码验证

最近需要在Angular中验证两个密码是否输入相同，具体代码如下：

equal-validator.directive.ts

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

@Directive({
  selector: '[validateEqual][formControlName],[validateEqual][formControl],[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 {
        validateEqual: false
      }
    }

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

    // value not equal and reverse
    if (e && v !== e.value && this.isReverse) {
      e.setErrors({
        validateEqual: false
      })
    }

    return null;
  }
}

之后在model里面引入equal-validator.directive.ts

import { NgModule } from '@angular/core';


import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
import {EqualValidator} from './equal-validator.directive';

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    SharedModule
  ],
  declarations: [
    SigninComponent,
    EqualValidator,
    SignupComponent
  ]
})
export class AccountModule { }

signup.component.html页面内容：

<div class="form-password">
  <mat-form-field class="full-width" appearance="outline">
    <mat-label>密码：</mat-label>
    <input type="password" matInput [(ngModel)]="model.password" #password="ngModel" name="password"  placeholder="password" (keyup)="clearMessages()" required maxlength="64" minlength="8" validateEqual="confirmPassword" reverse="true">
    <mat-error [hidden]="password.valid || (password.pristine && !f.submitted)">
      <mat-icon>info</mat-icon><span>密码最小长度为8个字符</span>
    </mat-error>
  </mat-form-field>
  <mat-form-field class="full-width" appearance="outline">
    <mat-label>确认：</mat-label>
    <input type="password" matInput [(ngModel)]="model.confirmPassword" name="confirmPassword" #confirmPassword="ngModel" placeholder="确认" (keyup)="clearMessages()" required  maxlength="64" minlength="8" validateEqual="password" reverse="false">
    <mat-error [hidden]="confirmPassword.valid || (confirmPassword.pristine && !f.submitted)">
      <mat-icon>info</mat-icon><span>两次密码输入不相同</span>
    </mat-error>
  </mat-form-field>
</div>

参考资料：

1、Angular 2 - Custom Validator Directive (final) scotch

2、How to implement custom confirm password validator in Angular 2 (Final) (template driven form)

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - Angular 确认密码验证