Angular在模板驱动表单中自定义校验器的方法
引言
模板驱动表单相比较响应式表单可以少更少的代码做同样的事情，可也损失了自由度与更易测试，当然很多人并不在乎啦。
所以我相信很多人在编写Angular不自由自主去更倾向于模板驱动表单的写法。
表单最核心的是校验体验，在Angular中简直就是发挥到了极致，比如：required、min、max、pattern 等，这些原本是HTML DOM元素中的表述，而Angular默认实现了一整套的校验指令，比如：required 对应 RequiredValidator。
然后很多时候我们需要一些特殊的校验，比如：数据比较、远程校验等。那在模板驱动表单风格中我们要如何优雅的实现这样一个校验器呢？
一、Angular是如何校验？
一般在编写一个手机文本框可能是这样：
<input [(ngModel)]="user.mobile" #mobile="ngModel" autocomplete="off" type="tel" class="form-control" name="mobile" required maxlength="11"> <div *ngIf="mobile.errors"> <p *ngIf="mobile.errors.required">手机号必填</p> <p *ngIf="mobile.errors.pattern">手机号格式不正确</p> </div>
以上几行很友好的实现从必填项、格式进行校验，而这一切都是依靠 [(ngModel)] 统一采集，得以只需要利用一个模板引用变量访问到每个校验指令的错误信息。
1、[(ngModel)] 到底做了什么？
在解析这个问题前需要先了解一下 RequiredValidator 是如何定义的。
@Directive({
providers: [{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => RequiredValidator),
multi: true
}]
})
export class RequiredValidator {}
只看最核心向 NG_VALIDATORS 标识符注册一个 RequiredValidator 指令。这样就可以使 ngModel 指令中注入 NG_VALIDATORS 后就能得到这个指令对象。
ngModel 我把它简化了一下：
export class NgModel extends NgControl {
constructor(@Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>) {}
get validator(): ValidatorFn|null {
// 各种校验并返回结果
}
}
有关更多ng_model.ts可以深入阅读源代码。
Angular会在每一次表单值变更时，对所有的表单中已经安装的校验器进行一次遍历。
二、编写一个校验器
诚如 required 校验器一样，依然是把自定义校验器挂到 NG_VALIDATORS 当中。假如我们希望手机文本框只能输入 159 开头的一个校验器。
定义Directive
@Directive({
selector: '[user-mobile]',
exportAs: 'userMobile',
providers: [{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => UserMobileDirective),
multi: true
}]
})
export class UserMobileDirective {}
一个非常普通的指令定义方法，只是多了一个将 UserMobileDirective 注册到 NG_VALIDATORS 标识符当中而已。别问我为什么，一种约定。
类
export class UserMobileDirective implements Validator {
validate(c: AbstractControl): { [key: string]: any; } {
let value: string = c.value || '';
if (!value.startsWith('159')) {
return {
mobile: {
msg: '手机号必须是159开头',
actualValue: value
}
};
}
return null;
}
}
只需要实现 Validator 接口的 validate 方法即可。
从 c 中获取DOM值，当遇到非 159 开头时，返回一个用于表述消息的对象即可，否则返回一个 null。这个对象会被统一采集在 ngModel.errors 对象下面。故而，只需要在DOM元素加上 user-mobile 指令即可。
<input user-mobile [(ngModel)]="user.mobile" #mobile="ngModel" autocomplete="off" type="tel" class="form-control" name="mobile" id="mobile" required maxlength="11">
<div *ngIf="mobile.errors">
<p *ngIf="mobile.errors.required">手机号必填</p>
<p *ngIf="mobile.errors.mobile">{{mobile.errors.mobile.msg}}</p>
</div>
接口还包括一个 registerOnValidatorChange 可选方法，当某些其它外部属性的变更时，允许重新手动触发校验。
三、异步校验器
如果说用户手机校验器需要检查手机是否为黑名单的情况下，正常黑名单数据都存在远程当中。这样情况下需要发送HTTP请求，而这一过程就是异步。
Angular针对这类异步校验有独立的另一个标识符，即：NG_ASYNC_VALIDATORS，而其它代码都是相通的。
@Directive({
selector: '[user-async]',
exportAs: 'userAsync',
providers: [{
provide: NG_ASYNC_VALIDATORS,
useExisting: forwardRef(() => UserAsyncDirective),
multi: true
}]
})
export class UserAsyncDirective implements Validator {
validate(c: AbstractControl): Observable<any> {
return c.valueChanges
// 去抖
.debounceTime(300)
// 抑制重复值
.distinctUntilChanged()
// 1、可以使用flatMap进行远程校验
// .flatMap(value => value)
// 2、本地模拟判断
.map((value: string) => {
if ([ '15900000001', '15900000002' ].includes(value)) {
return {
mobile: {
msg: '手机号为黑名',
actualValue: value
}
}
}
return null;
})
.first();
}
}
除了 NG_ASYNC_VALIDATORS 核心的结构完全没有变动。
而对于 validate 方法返回的是一个 Observable 类型，利用对 valueChanges 的订阅可以制作一些像去抖动作。
而最后必须使用 first() 做为结尾，原因每一次校验，对于结果而言只允许一个。
结论
本章介绍的是如何对模板驱动表单创建自定义校验器，它相比较响应式表单自定义校验器略为复杂一些。但是实际运用中，我们不应该只为某个构建表单风格做一种自定义校验器，应该二者是共存的。
比如上面 159 开头的示例。更合理的编写方式应该是将校验逻辑独立：
export class MyValidators {
static checkMobile(value: string): ValidationErrors|null {
return !value.startsWith('159') ? { mobile: { msg: '手机号必须是159开头' } } : null;
}
}
// 校验器类
export class UserMobileDirective implements Validator {
validate(c: AbstractControl): { [key: string]: any; } {
let value: string = c.value || '';
return MyValidators.checkMobile(value);
}
}
这样，同一个校验器，不管是模板驱动表单还是响应式表单，都能是通用的。
总结
以上所述是小编给大家介绍的Angular在模板驱动表单中自定义校验器的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本教程旨在帮助你尽可能快速而有效地学习AngularJS。通过该教程你会学习到AngularJS的一些基本特性，例如指令、表达式、过滤器、模块和控制器等。以及其它所有你需要知道的有关AngularJS的东西，如事件、DOM节点、表单、用户输入、数据验证、Http对象等。2015-09-09
深入解析AngularJS框架中$scope的作用与生命周期
这篇文章主要介绍了AngularJS中$scope的作用与生命周期,包括在DOM中添加controller对象的相关用法,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了浅谈angularjs $http提交数据探索，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-01-01
AngularJS通过ng-route实现基本的路由功能实例详解
这篇文章主要介绍了AngularJS通过ng-route实现基本的路由功能,结合实例形式详细分析了AngularJS使用ng-route实现路由功能的操作步骤与相关实现技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了AngularJS 中括号的作用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
下面小编就为大家带来一篇AngularJs 终极购物车的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
横向商品栏,把原有的滚动条改成自定义的样式,并且给两边加上箭头可以调整,可以拖动商品和滚轮实现滚动条效果,这篇文章主要介绍了angularjs 指令实现自定义滚动条效果,需要的朋友可以参考下2024-03-03
angular+ionic 的app上拉加载更新数据实现方法
这篇文章主要介绍了angular+ionic 的app上拉加载更新数据实现方法，需要的的朋友参考下2017-01-01
最近在使用angular来做项目，功能要求实现一是点击按钮获取验证码，二是点击登录验证表单。之前用jquery来做项目很好做，使用angular怎么实现呢？其实实现代码也很简单的，下面通过实例代码给大家介绍下，需要的朋友参考下吧2017-05-05
这篇文章主要介绍了在Angular中利用trackBy来提升性能的实现方法,需要的朋友可以参考下2018-01-01
最新评论