Angular 开发小妙招1:提交表单数据验证不通过,更改输入组件的样式
开发表单时,客户端数据完整性校验是必不可少的,在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:提交表单数据验证不通过,更改输入组件的样式的更多相关文章
- Web开发小妙招:巧用ThreadLocal规避层层传值
摘要:我们可以在处理每次请求的过程中,无需从Controller以及Service中的方法层层传值,只需要直接通过该局部变量取值即可. 本文分享自华为云社区<拦截器中巧用ThreadLocal规 ...
- jsp提交表单数据乱码,内置对象,以及过滤器
jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getPara ...
- ajax提交表单无法验证easyui的验证选项(比如required等)
在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情. 解决办法:使用jquery中ajax的beforeSend事件 ...
- ASP.NET 程序提交表单数据中带有html标签不能提交或者提交报错问题
今天在公司做另外的一个项目,又奇葩的遇到一个问题. 在本地自己电脑上怎么测试都是正常的.但是先上服务器就出问题: 用富文本编辑器上传一篇文章,始终报错,又没提示具体什么错误,也没说代码错误,点击提交按 ...
- JSON编码格式提交表单数据详解
以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始.而新出现的 ...
- easyui提交表单数据的时候如何防止二次提交
在前端提交数据的时候有时候可能会由于网络延迟等原因,我们在等待的时候会多次点击保存按钮,这可能会导致我们一次输入的数据多次提交,导致数据重复.最近在做项目的时候碰到了这个问题,先说一点,这个问题的解决 ...
- tomcat中间件提交表单数据量过大警告处理方案
http://www.bubuko.com/infodetail-976418.html http://www.cnblogs.com/yg_zhang/p/4248061.html tomcat中间 ...
- Spring Boot(三):RestTemplate提交表单数据的三种方法
http://blog.csdn.net/yiifaa/article/details/77939282 ********************************************** ...
- php表单数据验证类
非常好用方便的表单数据验证类 <?php //验证类 class Fun{ function isEmpty($val) { if (!is_string($val)) return false ...
随机推荐
- C# XML入门
什么是XML? XML:可扩展标记语言. XML的作用: 纯文本,兼容性强. 和HTML的区别: xml: 主要用来处理.存储数据.无规定标签,可扩展. html:对数据的显示和描述. 语法标签固定. ...
- 【转载】window.open被浏览器拦截的解决办法
今天在处理程序的过程中,发现window.open方法会被浏览器拦截,导致无法打开新页面,查阅相关资料后发现,主要原因是浏览器为了维护用户安全和体验,禁止在javascript中直接使用window. ...
- Centos 7.6配置nginx反向代理,直接yum安装
一,实验介绍 利用三台centos7虚拟机搭建简单的nginx反向代理负载集群, 三台虚拟机地址及功能介绍 192.168.2.76 nginx负载均衡器 192.168.2.82 web ...
- asp.net-基础-20180320
常用页面指令 <%@page%>:一个页面只能有一个 <%@Import NameSpace=“Value“%> 导入命名空间 <%@OutputCache%> 设 ...
- 【Java每日一题】20170220
20170217问题解析请点击今日问题下方的“[Java每日一题]20170220”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; import jav ...
- POST与GET的联系与区别
是什么? GET与POST是在客户机和服务器之间进行请求-响应时,两种最常被用到的方法: GET-从指定的资源请求数据. POST-向指定的资源提交要被处理的数据. 所以我们从语义上就能看出两者最明显 ...
- 今天给大家补充一下 background 用法
补充一个知识点 1,浏览器默认字体大小是font-size:16px:谷歌最小字体是10px,其他浏览器是12px 2. 选择器 通配符选择器 * 表示 3.background 背景 ...
- Sublime Text 2 JS 格式化插件 JsFormat
这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下载插件包放到sublime安装目录的DataPackages目录中重新打开sublim ...
- js获取当前url中参数
function getUrlParams(url){ var args=new Object(); var query=location.search.substring(1);//获取查询串 va ...
- 如何用ABP框架快速完成项目(8) - 用ABP一个人快速完成项目(4) - 能自动化就不要手动 - 使用自动化测试(BDD/TDD)
做为一个程序员, 深深知道计算机自动化的速度是比人手动的速度快的, 所以”快速”完成项目的一个重要武器就是: 能自动化就不要手动. BDD/TDD有很多优势, 其中之一就是自动化, 我们这节文章先 ...