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">最小长度为2nz-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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！