只在提交表单后显示错误信息

有时候不想在用户正在输入的时候显示错误信息. 当前错误信息会在用户输入表单时立即显示. 由于Angular很棒的数据绑定特性,这是可以发生的. 因为所有的事务都可以在一瞬间发生改变,这在表单验证时会有副作用.

对于你想要只在表单正要提交之后才显示错误消息的场景, 你就需要对上面的代码做一些小调整.

  1. 你要去掉提交按钮上的ng-disabled,因为我们想要用户即使是在表单没有全部验证完的情况下也能点击提交.

  2. 你要在表单已经被提交之后添加一个变量. 在你的 submitForm() 函数中, 只要加入 $scope.submitted = true 就行了;. 一旦表单被提交,它就会保存提交值为true的submitted变量.

  3. 将错误规则从ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }" 调整为 ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine && submitted }". 这就确保了错误消息只会在表单被提交时被显示出来. 你也许会需要为这个变量调整所有其它的 ng-class 和 ng-show.

现在,只有在submitted变量被设置为true时才会显示错误信息.

博客转自:http://www.html-js.com/article/With-the-development-of-Angular-web-applications-in-AngularJS-watch

ng表单验证,提交以后才显示错误的更多相关文章

  1. 第一百五十四节,封装库--JavaScript,表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  2. 表单验证提交——submit与button

    之前做东西接触过表单验证提交,但是都是为了完成工作,做完就做完了,没有注过表单验证提交有几种方法,各方法都有啥区别.今天瞎折腾了一下,对他们研究了一下,如下是我个人的理解: submit: 从字面上看 ...

  3. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  4. 原生JS写表单验证提交功能

    先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...

  5. ng表单验证

    <angular>中form表单的验: 1.在form中加上 novalidate 2.利用ng-pattern验证 (*如果不匹配的话 ng-model是绑定不上数据的) 常用的表单验证 ...

  6. Extjs 表单验证后,几种错误信息展示方式

    今天要求对form表单验证,进行系统学习一下,故做了几个示例: Ext.onReady(function(){        var panel=Ext.create('Ext.form.Panel' ...

  7. jquery.validate+jquery.form表单验证提交

    1.通过jquery.validate的submitHandler选项,即当表单通过验证时运行回调函数.在这个回调函数中通过jquery.form来提交表单: <script type=&quo ...

  8. Jquery插件easyUi表单验证提交

    <form id="myForm" method="post"> <table align="center" style= ...

  9. AngularJS的表单验证提交示例

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar 前台代码: <%@ page content ...

随机推荐

  1. 用Regex类计算一个字符串出现次数是最好方法【转载】

    我的一个朋友问我,怎么在c#或vb.net中,计算一个字符串中查找另一个字符串中出现的次数,他说在网上打了好多方法,我看了一下,有的是用replace的方法去实现,这种方法不是太好,占资源太大了.其实 ...

  2. Hyper-V虚拟化--逻辑网络、VM网络、逻辑交换机

    逻辑网络承接物理网卡和VM网卡 可以关联站点.主机组.VLAN.IP子网,配置静态IP地址池(虚机的PA地址从该静态IP地址池获取) 只有当逻辑网络中的网络站点关联了VLAN后,在VM中才可以选择VL ...

  3. 百度之星资格赛——Disk Schedule(双调旅行商问题)

    Disk Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  4. 实现类似shared_ptr的引用计数

    13.27 定义使用引用计数版本的HasPtr #include<iostream> #include<string> #include<new> using na ...

  5. cocoapods使用指南

    什么是cocoapods cocoapods是库管理工具. cocoapods的用途 解决库之间的依赖关系.如前文所述: 一个开源的项目可能是另一个项目的基础, A依赖B, B依赖C和D, D又依赖E ...

  6. IPv6 neighbor discovery

    IPv6 neighbor discovery By stretch | Thursday, August 28, 2008 at 5:03 a.m. UTC Neighbor Discovery P ...

  7. Java基础知识强化之IO流笔记49:IO流练习之 复制指定目录下指定后缀名的文件并修改名称的案例

    1. 复制指定目录下指定后缀名的文件并修改名称的案例     需求:复制指定目录下的指定文件,并修改后缀名.  • 指定的文件是:.java文件.     • 指定的后缀名是:.jad     • 指 ...

  8. UISenior之数据的本地化持久化

    数据的本地化主要分为两个方面:1.简单数据的本地持久化(NSString.NSArray.NSDictionary.NSData)2.复杂数据的本地持久化(本文以Person类为例) 简单对象的本地化 ...

  9. js函数、表单验证

    惊天bug!!!在script里面只要有一点点错误,就都不执行了!!!所以每写一个方法,就跑一下,因为这个书写疏忽导致的bug不可估量!!! [笑哭,所以我才这么讨厌js么,后来真心的是一点都不想再看 ...

  10. Cygwin下安装vim后,vim中退格键无法正常使用

    问题描述: 在Cygwin中安装完vim后 进入vim,发现上下左右键和退格键都无法正常使用 问题分析: 首先考虑到的就是缺少vim的配置文件,首先查看/etc路径下是否有vim的配置文件 admin ...