angular 实现同步验证器跨字段验证的方法


Posted in Javascript onApril 11, 2019

几乎每个web应用都会用到表单,Angular 为我们提供了几个内置 validators (验证器),但在实际工作中为了满足项目需求,我们经常需要为应用添加一些自定义验证功能。

angular内置验证器

  • required - 表单控件值非空
  • email - 表单控件值的格式是 email
  • minlength - 表单控件值的最小长度
  • maxlength - 表单控件值的最大长度
  • pattern - 表单控件的值需匹配 pattern 对应的模式(正则表达式)

需求:设置成绩占比时,如果总占比不是100%,则无法通过验证。

angular 实现同步验证器跨字段验证的方法

分析:需求很简单,只需要写一个验证器即可,由于不需要访问后台,且验证器与三个字段有关,所以是同步跨字段验证。

实现验证器

首先,去官网上找示例代码:

export const identityRevealedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
 const name = control.get('name');
 const alterEgo = control.get('alterEgo');

 return name && alterEgo && name.value === alterEgo.value ? { 'identityRevealed': true } : null;
};

解释:这个身份验证器实现了 ValidatorFn 接口。它接收一个 Angular 表单控件对象作为参数,当表单有效时,它返回一个 null,否则返回 ValidationErrors 对象。

从上可知,所谓跨字段,就是从验证表单单个控件formControl变成了验证整个表单formGroup了,而formGroup的每个字段就是formControl。

angular 实现同步验证器跨字段验证的方法

明白了这个原理,就是根据需求进行改写:

// 判断总占比是否等于100
  export const scoreWeightSumValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {
  const sumLegal = formGroup.get('finalScoreWeight')
    .value + formGroup.get('middleScoreWeight')
    .value + formGroup.get('usualScoreWeight')
    .value === 100;
    // 如果是,返回一个 null,否则返回 ValidationErrors 对象。
  return sumLegal ? null : {'scoreWeightSum': true};
};

到此,验证器已经写完。

添加到响应式表单

给要验证的 FormGroup 添加验证器,就要在创建时把一个新的验证器传给它的第二个参数。

ngOnInit(): void {
  this.scoreSettingAddFrom = this.fb.group({
    finalScoreWeight: [null, [Validators.required, scoreWeightValidator]],
    fullScore: [null, [Validators.required]],
    middleScoreWeight: [null, [Validators.required, scoreWeightValidator]],
    name: [null, [Validators.required]],
    passScore: [null, [Validators.required]],
    priority: [null, [Validators.required]],
    usualScoreWeight: [null, [Validators.required, scoreWeightValidator]],
  }, {validators: scoreWeightSumValidator});
}

添加错误提示信息

我使用的是ng-zorro框架,当三个成绩占比均输入时,触发验证

<nz-form-item nz-row>
  <nz-form-control nzValidateStatus="error" nzSpan="12" nzOffset="6">
    <nz-form-explain
      *ngIf="scoreSettingAddFrom.errors?.scoreWeightSum &&
       scoreSettingAddFrom.get('middleScoreWeight').dirty &&
       scoreSettingAddFrom.get('finalScoreWeight').dirty &&
       scoreSettingAddFrom.get('usualScoreWeight').dirty">成绩总占比需等于100%!
    </nz-form-explain>
  </nz-form-control>
</nz-form-item>

效果:

angular 实现同步验证器跨字段验证的方法

总结

总的来说这个验证器实现起来不算很难,就是读懂官方文档,然后根据自己的需求进行改写。

参考文档:angular表单验证 跨字段验证

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
vue实现新闻展示页的步骤详解
Apr 11 #Javascript
记一次用vue做的活动页的方法步骤
Apr 11 #Javascript
vue数据初始化initState的实例详解
Apr 11 #Javascript
Vue起步(无cli)的啊教程详解
Apr 11 #Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 #Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 #Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 #Javascript
You might like
一段php加密解密的代码
2007/07/16 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
Python入门_学会创建并调用函数的方法
2017/05/16 Python
Python开发的HTTP库requests详解
2017/08/29 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Python hashlib模块的使用示例
2020/10/09 Python
Django数据统计功能count()的使用
2020/11/30 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
党员评议个人总结
2014/10/20 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
二审代理词范文
2015/05/25 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
JavaScript实现栈结构详细过程
2021/12/06 Javascript
一文简单了解MySQL前缀索引
2022/04/03 MySQL