开发表单时,客户端数据完整性校验是必不可少的,在jquery 时代出现了无数的数据验证插件也很好用,开发Angular 应用时,angular 内置了一些常用的数据验证指令。今天要讲的不是这些指令如何使用,今天讲什么呢,今天讲一些关于验证样式的问题,相关的基础知识在angular.cn 官方文档中都有介绍,在此就不多说了。但还有一些小的易用性方面的没有在文档中指出。

比如:设置了必填后 (就是在input 中增加 required 属性),表单加载完毕后,还没有做任何操作时(无任何的键盘及鼠标操作),input 控件自动的改变了样式,比如红色边框,而我想着是在input 失去焦点后在添加红色的边框,这种情况咋搞呢,经过细致的参考官方文档,我们可以设置样式来达到这个效果,如:

.form-control.ng-invalid.ng-touched { border-color: red; }

ng-invalid: 数据验证不通过时添加的样式名

ng-touched:失去焦点后添加的样式名

添加以上样式后,只有当input 失去焦点并且数据验证不通过时边框的颜色 才会为红色。

如果表单加载完成后,我们直接点击提交按钮会怎样呢,假设我们的提交代码如下

public btnSubmit() {
if ( this.frm.valid ) {
......
}
}

此时表单的验证状态肯定是false , 数据验证失败,而控件上又没有提示,怎么办? 通过查看浏览器源代码发现input 中没有ng-touched 样式,如何添加上这个呢?各种百度 google 后得出,需要循环from 中的所有control,并调用每个control的markAsTouched 方法 代码大至如下:

public btnSubmit() {
Object.values( this.frm.controls).forEach( (c:FormControl) => c.markAsTouched()); // 添加这一句后,验证失败的input 会添加 ng-touched 样式,控件的边框就会变红了
if ( this.frm.valid ) {
......
}
}

没啥高深的内容,废话有点多,就这样吧

Angular 开发小妙招1:提交表单数据验证不通过,更改输入组件的样式的更多相关文章

  1. Web开发小妙招:巧用ThreadLocal规避层层传值

    摘要:我们可以在处理每次请求的过程中,无需从Controller以及Service中的方法层层传值,只需要直接通过该局部变量取值即可. 本文分享自华为云社区<拦截器中巧用ThreadLocal规 ...

  2. jsp提交表单数据乱码,内置对象,以及过滤器

    jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getPara ...

  3. ajax提交表单无法验证easyui的验证选项(比如required等)

    在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情.   解决办法:使用jquery中ajax的beforeSend事件 ...

  4. ASP.NET 程序提交表单数据中带有html标签不能提交或者提交报错问题

    今天在公司做另外的一个项目,又奇葩的遇到一个问题. 在本地自己电脑上怎么测试都是正常的.但是先上服务器就出问题: 用富文本编辑器上传一篇文章,始终报错,又没提示具体什么错误,也没说代码错误,点击提交按 ...

  5. JSON编码格式提交表单数据详解

    以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始.而新出现的 ...

  6. easyui提交表单数据的时候如何防止二次提交

    在前端提交数据的时候有时候可能会由于网络延迟等原因,我们在等待的时候会多次点击保存按钮,这可能会导致我们一次输入的数据多次提交,导致数据重复.最近在做项目的时候碰到了这个问题,先说一点,这个问题的解决 ...

  7. tomcat中间件提交表单数据量过大警告处理方案

    http://www.bubuko.com/infodetail-976418.html http://www.cnblogs.com/yg_zhang/p/4248061.html tomcat中间 ...

  8. Spring Boot(三):RestTemplate提交表单数据的三种方法

    http://blog.csdn.net/yiifaa/article/details/77939282 ********************************************** ...

  9. php表单数据验证类

    非常好用方便的表单数据验证类 <?php //验证类 class Fun{ function isEmpty($val) { if (!is_string($val)) return false ...

随机推荐

  1. 记录.net使用ueditor富文本编辑器

    UEditor是什么 最近在在项目的时候使用到了百度的富文本编辑器.官网有详细的操作流程文档.这里我只是记录项目中常用到的一些事件.以便日后可以方便查询. UEditor是百度的一个javascrip ...

  2. 动态编程(Dynamic Programming)

    本文素材来自视频,请自备梯子观看:What Is Dynamic Programming and How To Use It Dynamic Programming:动态编程分为如下几步: 将复杂问题 ...

  3. 4.5 explain 之 ref

    一.说明 显示索引的哪一列被使用了,如果可能的话,是一个常数.哪些列或常量被用于查找索引上的值. 二.示例 a. b. c. 关注我的公众号,精彩内容不能错过

  4. 【Java每日一题】20170221

    20170220问题解析请点击今日问题下方的“[Java每日一题]20170221”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; public cla ...

  5. 【Java基础】16、小数的浮点型和定点型

    一.简介 1.对于不需要任何准确计算精度的数字可以直接使用浮点型,但是如果需要精确计算的结果,则必须使用定点型(BigDecimal类) 浮点型:float,double 定点型:BigDecimal ...

  6. linux中make的用法

    一.linux中make的用法 目的:       基本掌握了make 的用法,能在Linux系统上编程.环境:       Linux系统准备:       准备三个文件:file1.c, file ...

  7. js-string.js

    //小结// string.charAt(pos) 返回string中pos所在位置的字符 var name = "Cynthia"; var i = name.charAt(0) ...

  8. 洛谷P4591 [TJOI2018]碱基序列(hash dp)

    题意 题目链接 Sol \(f[i][j]\)表示匹配到第\(i\)个串,当前在主串的第\(j\)个位置 转移的时候判断一下是否可行就行了.随便一个能搞字符串匹配的算法都能过 复杂度\(O(|S| K ...

  9. css优先级计算规则——权重

    一.css的优先级 当对同一个元素设置相同的多个声明时,会按照优先级的高低选择应用哪种声明. <style> #id{ color:red; } p{ color:blue; } < ...

  10. 数据分析 - 美国金融科技公司Prosper的风险评分分析

    数据分析 - 美国金融科技公司Prosper的风险评分分析 今年Reinhard Hsu觉得最有意思的事情,是参加了拍拍贷第二届魔镜杯互联网金融数据应用大赛.通过"富爸爸队",认识 ...