【问题标题】:ngMessages/angular validation not workingngMessages/角度验证不起作用
【发布时间】:2015-04-02 22:05:50
【问题描述】:

我既没有得到模板片段发出的值,也没有得到有效的验证。我的翡翠模板:

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。我做错了什么?

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    发生这种情况是因为您没有将 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

    【讨论】:

    • 而且你没有使用正确的 ng-message 来表示最小长度,它是 when="minlength'
    • @one 否决了它,请评论我需要理由。
    • 看起来你的反对票已经消失了。我注意到ng-model 可以是任何东西,例如ng-model="foo" 工作。
    【解决方案2】:

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

    请确保以下几点:

    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 即可运行!

    【讨论】:

    • 在这里又浪费了一个小时,感谢您的帮助,不要让它成为 2 :)
    • 这里也一样,这解决了。感谢您发布@mnishiguchi,有时同样的问题可能是由其他原因引起的:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-05-03
    • 2019-10-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多