Angular 2自定义验证器(模板表单)验证

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

@Directive({
  selector: '[customValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
})
export class CustomValidatorDirective implements Validator {
  @Input('customValidator') customValidation: string;

  validate(control: AbstractControl): {[key: string]: any} | null {
    const value = control.value;
    // 在这里编写自定义验证逻辑
    // 如果验证失败，返回一个包含错误信息的对象
    // 如果验证成功，返回null
  }
}

<form>
  <input type="text" name="username" [(ngModel)]="username" customValidator="required" />
  <div *ngIf="username.invalid && (username.dirty || username.touched)">
    <div *ngIf="username.errors.required">用户名不能为空</div>
  </div>
</form>