Angular2表单自定义验证器的实现


Posted in Javascript onOctober 19, 2016

本文主要给大家介绍如何判断验证器的结果。在这里,我们就来看看怎样实现一个自定义的验证器。

目标

我们要实现一个验证手机号的验证器,使用的实例还是基于之前的文章里面的实例,也就是用户信息输入的表单页面。我们在手机号的元素上添加一个验证手机号的验证器。然后,如果手机号验证失败,就显示一个错误,页面如下:

Angular2表单自定义验证器的实现

这部分教程的代码可以从github获取:

git clone

https://github.com/Mavlarn/angular2-forms-tutorial

如果要运行,进入项目目录,运行下面的命令安装依赖然后运行测试服务器:

cd angular2-forms-tutorial
git checkout model-driven # 检出该文所使用的tag
npm install
npm start

实现验证器

在Angular2中,实现一个验证器非常简单,就是一个方法就可以,该方法的参数是一个FormControl,结果是一个错误对象或者null。用TypeScript接口表示,就是这样:

interface Validator<T extends FormControl> {
(c:T): {[error: string]:any};
}

如果是对类似Java这样的面向对象语言比较了解的话,上面的接口定义就很容易理解。其中<T extends FormControl>是指这个方法中用到一个泛型T,它是一个继承自FormControl的对象。(c:T): {[error: string]:any};这是一个lambda表达式的方法定义,参数c的类型为T,这个方法返回一个对象。

我们创建一个名为mobile.validator.ts的文件,它的内容如下:

import { FormControl } from '@angular/forms';
export function validateMobile(c: FormControl) {
let MOBILE_REGEXP = /^1[0-9]{10,10}$/;
return MOBILE_REGEXP.test(c.value) ? null : {
validateMobile: {valid: false}
}
}

在这个验证方法里,参数c的类型为FormControl,也就是表单控件,他有一个value属性,存放当前的值。我们使用正则表达式,来判断这个值是否合法。如果不合法,就返回一个对象。
在之前的教程中,我们对验证器的验证结果是这样获得的:

<p *ngIf="userForm.controls.mobile?.errors?.required">必须输入电话</p>

userForm.controls.mobile就是表单中手机号这个控件,required是required验证器对应的key,当required验证器验证失败时,就会在errors里面添加一个值:

{
required: {valid: false}
}

所以,我们实现的自定义的验证器,也要把验证结果用验证器的名字作为key,放到errors里面,就是这样:

{
validateMobile: {valid: false}
}

这样,我们就能够在页面中用跟之前同样的方式来获得这个验证器的验证结果。

在模型驱动的表单里添加验证器

接下来,我们把我们实现的验证器添加到我们的表单里,先加到模型驱动的表单里:

import { validateMobile } from '../validators/mobile.validator';
export class ReactiveFormsComponent implements OnInit {
this.userForm = this.formBuilder.group({
// ... 省略其他控件
mobile: [13800138001, [Validators.required, Validators.minLength(11), Validators.maxLength(11), validateMobile]]
});
...
}

上面的代码省略了其他的部分,完整的代码,请参考github。

在上面的代码中,我们引入了之前实现的自定义的验证器,然后在表单控件创建代码中,对mobile控件加了一个validateMobile。

这样,我们在页面上添加相应的验证结果信息:

<p *ngIf="userForm.controls.mobile.errors?.validateMobile">电话号码格式不正确</p>

这样就完成了验证器,以及在页面显示验证结果,就这么简单。

在模板驱动的表单里添加验证器

但是,如果我们的表单不是在组件里用模型驱动的方式创建的,而是在页面上用html元素创建的,那么使用自定义的验证器就稍微麻烦一点。

在一个模板驱动的表单里,我们是这样使用验证器的:

<input type="text" name="mobile" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11">
<span *ngIf="mobile.valid">有效</span>
<div [hidden]="mobile.valid || mobile.pristine">
<p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength">电话长度必须为11</p>
<p *ngIf="mobile.errors?.required">必须输入姓名</p>
</div>

也就是在input输入元素的属性中添加验证器。那么,我们要实现自己的验证器在表单里面使用,除了上面的验证器方法里面,还需要2件事情:

我们需要将这个验证器定义成一个指令Directive,这样Angular在解析这段html的时候,会识别我们自定义的验证器指令。
我们还需要Angular的验证器调用我们的验证方法。
所以,在之前的mobile.validator.ts文件里,添加下面的指令定义:

@Directive({
selector: '[validateMobile][ngModel]'
})
export class MobileValidator {}

这段代码很简单,就是用@Directive标签定义了一个指令MobileValidator,它作用的元素是同时具有validateMobile和ngModel属性的元素。这样,我们就可以在手机号的元素上添加一个属性,来使这个验证器指令起作用。
然后,我们还需要Angular的验证器框架能够调用我们的验证方法,这就需要NG_VALIDATORS。我们修改上面的验证器的指令定义如下:

@Directive({
selector: '[validateMobile][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useValue: validateMobile, multi: true }
]
})
export class MobileValidator {}

这样Angular的验证器就能够将validateMobile方法应用在这个指令上。

最后,我们再把这个新的指令,添加到AppModule的declarations里面,就可以在页面上使用这个验证器了。

最后,页面上使用验证器的代码如下:

<input type="text" name="mobile" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11" validateMobile>
<span *ngIf="mobile.valid">有效</span>
<div [hidden]="mobile.valid || mobile.pristine">
<p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength">电话长度必须为11</p>
<p *ngIf="mobile.errors?.required">必须输入姓名</p>
<p *ngIf="mobile.errors?.validateMobile">电话号码格式不正确</p>
</div>

以上所述是小编给大家介绍的Angular2表单自定义验证器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
js模块加载方式浅析
Aug 12 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
javascript滚轮控制模拟滚动条
Oct 19 #Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 #Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 #Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 #Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 #Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 #Javascript
使用Angular.js开发的注意事项
Oct 19 #Javascript
You might like
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
护理自我鉴定范文
2013/10/06 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
党支部换届选举方案
2014/05/08 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2014年新教师工作总结
2014/11/08 职场文书
学校社团活动总结
2015/05/07 职场文书
新学期开学寄语2016
2015/12/04 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android