继Angular学习笔记52：模板驱动式表单添加基本的校验器,有时候，自带的一些校验并不能满足实际项目的需求，所以需要写一些自定义的校验器。
为模板驱动式表单中的控件增加自定义的校验器
写一个只能有英文、数字、下划线组成的自定义的校验器
只能有英文、数字、下划线的正则表达式为：/^\w+$/
所以自定义的校验器为：
export function nameValidator(): ValidatorFn {return (control: AbstractControl): {[key: string]: any } | null => {const nameValidator = /^\w+$/;const isValid = nameValidator.test(control.value);return isValid ? null : {nameValidator: {value: control.value}};};}
将这个自定义校验器添加到当前的控件中
由于模版驱动表单不能直接访问formControl的实例，所以此时需要新建一个指令，并且让这个指令注册成 NG_VALIDATORS ，从让Angular来识别这个指令是校验器，然后将这个指令添加到控件中就可以了。
新建一个指令 在public目录下新建一个directive目录
mkdir directive
切换到directive目录下
cd directive
创建一个指令
ng g directive nameValidatorDirective
执行结果
wujiayudeMacBook-Pro:directive wjy$ ng g directive nameValidatorDirectiveCREATE src/app/public/directive/name-validator-directive.directive.spec.ts (290 bytes)CREATE src/app/public/directive/name-validator-directive.directive.ts (173 bytes)UPDATE src/app/app.module.ts (2442 bytes)
将这个指令注册为 NG_VALIDATORS
import {Directive} from '@angular/core';import {AbstractControl, NG_VALIDATORS, ValidationErrors, Validator} from '@angular/forms';@Directive({selector: '[appNameValidatorDirective]',providers: [{provide: NG_VALIDATORS, useExisting: NameValidatorDirectiveDirective, multi: true}]})export class NameValidatorDirectiveDirective {constructor() {}}
将这个指令实现 Validator 的接口
import {Directive} from '@angular/core';import {AbstractControl, NG_VALIDATORS, ValidationErrors, Validator} from '@angular/forms';@Directive({selector: '[appNameValidatorDirective]',providers: [{provide: NG_VALIDATORS, useExisting: NameValidatorDirectiveDirective, multi: true}]})export class NameValidatorDirectiveDirective implements Validator {constructor() {}validate(control: AbstractControl): ValidationErrors | null {return null;}}
在指令中增加校验器
import {Directive} from '@angular/core';import {AbstractControl, NG_VALIDATORS, ValidationErrors, Validator} from '@angular/forms';import {nameValidator} from '../../forms-validator/forms-ponent';@Directive({selector: '[appNameValidatorDirective]',providers: [{provide: NG_VALIDATORS, useExisting: NameValidatorDirectiveDirective, multi: true}]})export class NameValidatorDirectiveDirective implements Validator {constructor() {}validate(control: AbstractControl): ValidationErrors | null {return nameValidator()(control);}}
在控件中添加这个校验并增加提示信息
<nz-content><nz-divider nzText="模板驱动式表单验证"></nz-divider><form nz-form><nz-form-item><nz-form-label nzSpan="3" nz-col>姓名</nz-form-label><nz-form-control nzSpan="6" nz-col><input nz-input type="text" name="name" id="name"required minlength="2" maxlength="10" appNameValidatorDirective#nameValidate="ngModel"[(ngModel)]="name" [ngModelOptions]="{standalone: true}"><nz-form-explain *ngIf="nameValidate.invalid && nameValidate.dirty && nameValidate.errors.required">必填选项不能为空</nz-form-explain><nz-form-explain *ngIf="nameValidate.invalid && nameValidate.dirty && nameValidate.errors.minlength">最小长度为2</nz-form-explain><nz-form-explain *ngIf="nameValidate.invalid && nameValidate.dirty && nameValidate.errors.nameValidator">只能输入英文、数字、下划线</nz-form-explain></nz-form-control></nz-form-item></form></nz-content>
实现效果如下：
以上代码可以参考W先生的GitHub
