Angular学习笔记53：模板驱动式表单添加自定义的校验器，添加自定义的指令

继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来识别这个指令是校验器，然后将这个指令添加到控件中就可以了。

1. 新建一个指令

• 在public目录下新建一个directive目录

mkdir directive

• 切换到directive目录下

cd directive

• 创建一个指令

ng g directive nameValidatorDirective

• 执行结果

wujiayudeMacBook-Pro:directive wjy$ ng g directive nameValidatorDirective
CREATE 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)

2. 将这个指令注册为 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() {
  }

}

3. 将这个指令实现 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;
  }

}

4. 在指令中增加校验器

import {Directive} from '@angular/core';
import {AbstractControl, NG_VALIDATORS, ValidationErrors, Validator} from '@angular/forms';
import {nameValidator} from '../../forms-validator/forms-validator.component';

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

}

5. 在控件中添加这个校验并增加提示信息

<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