在 Angular2 中实现自定义校验指令（确认密码）的方法

// user.interface.ts
export interface User {
 username: string; // required, must be 5-8 characters
 email: string; // required, must be valid email format
 password: string; // required, value must be equal to confirm password.
 confirmPassword: string; // required, value must be equal to password.
}

|- app/
 |- app.component.html
 |- app.component.ts
 |- app.module.ts
 |- equal-validator.directive.ts
 |- main.ts
 |- user.interface.ts
|- index.html
|- styles.css
|- tsconfig.json

$ npm install @angular/forms --save

// app.module.ts
import { NgModule }  from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
 imports:  [ BrowserModule, FormsModule ], // import forms module here
 declarations: [ AppComponent ],
 bootstrap: [ AppComponent ],
})
export class AppModule { }

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { User } from './user.interface';
@Component({
 moduleId: module.id,
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {
 public user: User;
 ngOnInit() {
  // initialize model here
  this.user = {
   username: '',
   email: '',
   password: '',
   confirmPassword: ''
  }
 }
 save(model: User, isValid: boolean) {
  // 调用API保存customer
  console.log(model, isValid);
 }
}

<!-- app.component.html -->
<div>
 <h1>Add user</h1>
 <form #f="ngForm" novalidate (ngSubmit)="save(f.value, f.valid)">
  <!-- 我们将把验证的字段放在这里 -->
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
 </form>
</div>

<!-- app.component.html -->
...
<div>
 <label>Username</label>
 <input type="text" name="username" [ngModel]="user.username" 
  required minlength="5" maxlength="8" #username="ngModel">
 <small [hidden]="username.valid || (username.pristine && !f.submitted)">
  Username is required (minimum 5 characters).
 </small>
</div>
<pre *ngIf="username.errors">{{ username.errors | json }}</pre>
...

<!-- app.component.html -->
...
<div>
 <label>Email</label>
 <input type="email" name="email" [ngModel]="user.email" 
  required pattern="^[a-zA-Z0?C9_.+-]+@[a-zA-Z0?C9-]+.[a-zA-Z0?C9-.]+$" #email="ngModel" >
 <small [hidden]="email.valid || (email.pristine && !f.submitted)">
  Email is required and format should be <i>john@doe.com</i>.
 </small>
</div>
...

<!-- app.component.html -->
...
<div>
 <label>Password</label>
 <input type="password" name="password" [ngModel]="user.password" 
  required #password="ngModel">
 <small [hidden]="password.valid || (password.pristine && !f.submitted)">
  Password is required
 </small>
</div>
<div>
 <label>Retype password</label>
 <input type="password" name="confirmPassword" [ngModel]="user.confirmPassword" 
  required validateEqual="password" #confirmPassword="ngModel">
 <small [hidden]="confirmPassword.valid || (confirmPassword.pristine && !f.submitted)">
  Password mismatch
 </small>
</div>
...

// 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) {}
 validate(c: AbstractControl): { [key: string]: any } {
  // self value (e.g. retype password)
  let v = c.value;
  // control value (e.g. password)
  let e = c.root.get(this.validateEqual);
  // value not equal
  if (e && v !== e.value) return {
   validateEqual: false
  }
  return null;
 }
}

// equal-validator.directive.ts
@Directive({
 selector: '[validateEqual][formControlName],[validateEqual] 
 [formControl],[validateEqual][ngModel]',
 providers: [
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
 ]
})

// equal-validator.directive.ts
export class EqualValidator implements Validator {
 constructor( @Attribute('validateEqual') public validateEqual: string) {}
 validate(c: AbstractControl): { [key: string]: any } {}
}

// equal-validator.directive.ts
validate(c: AbstractControl): { [key: string]: any } {
 // 自己的值 (如 retype password)
 let v = c.value;
 // 控件的值 (如 password)
 let e = c.root.get(this.validateEqual);
 // 值不等旱
 if (e && v !== e.value) return {
  validateEqual: false
 }
 return null;
}

// app.module.ts
...
import { EqualValidator } from './equal-validator.directive'; // 导入验证器
import { AppComponent } from './app.component';
@NgModule({
 imports:  [ BrowserModule, FormsModule ],
 declarations: [ AppComponent, EqualValidator ], // 导入到应用模块
 bootstrap: [ AppComponent ],
})
...

<!-- app.component.html -->
...
<input type="password" class="form-control" name="password" 
 [ngModel]="user.password" 
 required validateEqual="confirmPassword" reverse="true">
<input type="password" class="form-control" name="confirmPassword" 
 [ngModel]="user.confirmPassword" 
 required validateEqual="password">
...

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