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表单自定义验证器，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
最近一直在忙一个手机端的项目，所以对js学习有点松撤了。今天小编抽时间跟大家分享一篇关于angularjs中的页面访问权限设置教处，对angularjs访问权限感兴趣的朋友一起学习吧2016-11-11
本文通过实例代码给大家介绍了Angular中的$watch方法，包括$watch简介及基本用法，需要的朋友参考下吧2017-09-09
这篇文章主要介绍了Angular2 http jsonp的实例详解的相关资料,希望通过本能帮助到大家，需要的朋友可以参考下2017-08-08
这篇文章主要介绍了angular框架实现全选与单选chekbox的自定义,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了详解Angular6 热加载配置方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了angular学习之ngRoute路由机制，ngRoute是一个Module，提供路由和深层链接所需的服务和指令。有需要的可以了解一下。2017-04-04
这篇文章主要介绍了AngularJS框架中数据的双向绑定运用实例,包括数据绑定中的关键函数与监听器触发的相关讲解,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了详解Angular中实现自定义组件的双向绑定的两种方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
angular2+node.js express打包部署的实战
本篇文章主要介绍了angular2+node.js express打包部署的实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Angular 中 select指令用法详解的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
最新评论