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 相关文章推荐
javaScript面向对象继承方法经典实现
Aug 20 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
Javascript的this详解
Mar 23 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
js实现拖动缓动效果
Jan 13 Javascript
JavaScript实现网页跨年倒计时
Dec 02 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设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
深入php处理整数函数的详解
2013/06/09 PHP
xml和web特殊字符
2009/04/28 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
pandas带有重复索引操作方法
2018/06/08 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
经济学人订阅:The Economist
2018/07/19 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
土木工程专业自荐信
2013/10/04 职场文书
美容院营销方案
2014/03/05 职场文书
早读课迟到检讨书
2014/09/25 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
辞职信怎么写?
2019/05/21 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
python套接字socket通信
2022/04/01 Python