ngMessages /角度验证不起作用

时间:2015-02-03 16:08:42

标签: angularjs

我既没有得到模板片段发出的值也没有运行验证。我的玉模板:

doctype html
html(lang='en', ng-app="Validate")
  head
    script(src='#{cdn_path}/angular.js/1.3.11/angular.js')
    script(src='#{cdn_path}/angular.js/1.3.11/angular-messages.js')
    script.
      angular.module('Validate', ['ngMessages']);
  body
    .container
      form(method="POST", action="/apply", name="myform", novalidate="")
        pre myform.name.$error = {{ myform.name.$error }}
        input.form-control(name="name", required="", pattern=".*[a-zA-Z].*", minlength=5)
        ng-messages(for="myform.name.$error")
          ng-message(when="required") Required!
          ng-message(when="min") Too small!
        input.btn(type='submit')

生成的HTML:http://plnkr.co/edit/McyMXwW1b2Ae7kkwQ1sP

我想避免使用自定义指令或更多Javascript的方式。我做错了什么?

2 个答案:

答案 0 :(得分:18)

这种情况正在发生,因为您没有将ng-model绑定到输入: - )

 <input name="name" ng-model="name" required="" pattern=".*[a-zA-Z].*" minlength="5" class="form-control">
        <ng-messages for="myform.name.$error">
        <ng-message when="minlength">Too small!</ng-message>
        <ng-message when="required">Required!</ng-message>

Plunker: - http://plnkr.co/edit/kmNkfhdVOHQsstj6dpPT?p=preview

答案 1 :(得分:17)

我有同样的问题并解决了它。我想分享它,所以没有人会像我一样浪费一个小时。

请确保以下内容:

<强> 1。加载ngMessages模块

<!-- Load Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>

<!-- Load ngMessages -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.min.js"></script>

<强> 2。将ngMessages注入我们的应用程序模块

angular.module( "app", [ "ngMessages" ] );

第3。尝试更新的版本 出于某种原因,Doug Luce的代码仅通过将版本更改为例如4.11来实现工作!