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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
理解JavaScript原型链
Oct 25 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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
PHP写MySQL数据 实现代码
2009/06/15 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
Smarty保留变量用法分析
2016/05/23 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
详解JS函数重载
2014/12/04 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
Angularjs 事件指令详细整理
2017/07/27 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
win10安装python3.6的常见问题
2020/07/01 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
团队拓展活动总结
2014/08/27 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang