Angular2 自定义validators的实现方法


Posted in Javascript onJuly 05, 2017

angular 当需要form表单需要验证时,angular自带了许多校验器,但是很多时候自带的无法满足业务需求,这时候就需要自定义的校验器

定义一个validator

定义validator 需要实现 ValidatorFn 接口

源码:

export interface ValidatorFn {
  (c: AbstractControl): ValidationErrors | null;
}

接收一个 AbstractControl 返回 ValidationErrors 或者null

ValidationErrors 源码

export declare type ValidationErrors = {
  [key: string]: any;
};

这其实就是返回一个 key value 类型的对象,这个对象会在验证信息不通过的时候赋值给 formControl.errors

写好的Validator 需要在创建FormControl作为参数传入

FormControl 的构造器源码

export declare class FormControl extends AbstractControl {
  constructor(formState?: any, validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);

下面是个简单的例子(校验邮箱地址):

定义一个返回 ValidatorFn 接口的方法

static EMAIL_REG = new RegExp('\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}');
static email(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => { ①
   if (!EMAIL_REG.test(control.value)) { ②
    return { ③
     errMsg: '请输入正确的邮箱地址'
    };
   }
   return {}; ④
  };
 }

① 方法返回 ValidatorFn 的实例

② 判断是否符合邮箱正则表达式

③ 如果不符合 返回一个 ValidationErrors 对象,errMsg 作为错误信息输出 (这里也可以再加一个 布尔型的作为判断)

④ 如果校验成功返回一个空的对象

传入校验器

email = new FormControl('', email())

模板:

<p *ngIf = "!email.valid && email.touched">{{email.errors.errMsg}}</p>

当邮箱格式不正确时 这里就会显示 ‘请输入正确的邮箱地址'

至此一个简单的校验器就完成了。

如果想比较2个form的值是否相等的话只需要做一些小的改变

static EMAIL_REG = new RegExp('\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}');
static email(emailForm: FormControl): ValidatorFn { ①
  return (control: AbstractControl): { [key: string]: any } => { 
   if (emailForm.value !== control.value ) { 
    return { 
     errMsg: '请输入相同邮箱地址'
    };
   }
   return {}; 
  };
 }

① 只需要在这里传入另一个需要做对比的 formControl 即可

email = new FormControl('', email())
email2 = new FormControl('', email(email))

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

Javascript 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 #Javascript
使用angular帮你实现拖拽的示例
Jul 05 #Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 #Javascript
jquery拖动改变div大小
Jul 04 #jQuery
JavaScript无操作后屏保功能的实现方法
Jul 04 #Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 #Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 #Javascript
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
javascript图片滑动效果实现
2021/01/28 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
js调用设备摄像头的方法
2018/07/19 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
中文专业毕业生自荐信
2014/05/24 职场文书
伊琍体标语
2014/06/25 职场文书
明确岗位职责
2015/02/14 职场文书
学校运动会感想
2015/08/10 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
创业计划书之服装
2019/10/07 职场文书