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 相关文章推荐
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
uniapp开发小程序的经验总结
Apr 08 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自动加载的两种实现方法
2010/06/21 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
js实现数字滚动特效
2019/12/16 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
python计算方程式根的方法
2015/05/07 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
使用Python函数进行模块化的实现
2019/11/15 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
早餐连锁店计划书
2014/01/08 职场文书
创业计划书如何编写
2014/02/06 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android