Angular JS 表单验证 之 提示信息的显示与隐藏

子标题:

Angular JS 表单验证 之 提示信息的显示与隐藏 的两种方式。文章标题不能少于10个汉字~囧

好了，直奔主题。先上Demo，详情戳这里，放在 Runjs.cn上面。Plunker 要好用很多，只是被墙，这也被墙，想不明白。

---

• 本身这个示例就很明了了。第一个 class 为 form-group 的 div，使用的是 ng-show 来控制 提示信息的显示与隐藏，我这里假设你已经明白了 AngularJS 的基本语法。再者就是很多文章对这个指令大写特写了，我也就没有必要再去详细写了。

  Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

ngClass支持对象表达式，所以 ng-class="{'has-success': signupForm.username.$valid, 'has-error':signupForm.username.$invalid && signupForm.username.$dirty}" 这样就轻松实现了 BootStrap 里面 has-success 样式 和 has-error 样式的转换。

• 第二个 class 为 form-group 的 div, 使用的是 ngMessages 这个指令。链接指向AngularJS 官方文档，翻不了墙的童鞋就不要点了('')
  这个指令的用法初次是在 AngularJS权威教程 这本书里面看到的示例，然后自己google了一下(画外音：明明是百度好么！(╯▔皿▔)╯)

  <div class="help-block" ng-messages="signupForm.password.$dirty && signupForm.password.$error">
  <div ng-message="required">魂淡！密码不能为空！</div>
  <div ng-message="minlength">魂淡！密码不能少于6个字符</div>
  <div ng-message="maxlength">魂淡~密码需要那么长么~！</div>
  </div>

  ngMessages 这个指令需要引入文件名为 angular-messages 的JS文件，并且需要注入到我们的ngApp模块中。 可以使用 如上所示 的 Attribute 写法，当然也支持 Element 的写法 //即 <ng-messages></ng-messages>

  ngMessages is a directive that is designed to show and hide messages based on the state of a key/value object that it listens on. The directive itself complements error message reporting with the ngModel $error object (which stores a key/value state of validation errors).

这是摘自AngularJS ngMessages指令官方原文档的一句话，意即 ngMessages 这个指令是用来控制所监听的对象的（我们所设定的）提示信息的展示与隐藏。
我比较推崇ngMessages这个指令来控制错误信息，显而易见的好处就是代码的可读性更高，也更为简洁。