ngMessage 在 AngularJs 中不起作用

ngMessage not working in AngularJs

提问人:Deadpool 提问时间:3/14/2016 最后编辑:Deadpool 更新时间:3/14/2016 访问量:1649

问:

我正在对必需的 ng-Message 进行简单的验证,但找不到 ng-Message 在错误输入或单击提交时工作。有人可以帮我解决我哪里错了吗?

HTML格式:

<html>
<head>
    <!-- Script Files --> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

    <form name="form1" id="form1" novalidate> 
        <input type="text" name="age" ng-minlength="3" required/> 
        <div ng-messages="form1.age.$error" ng-show="(form1.age.$error.required || form1.age.$error.minlength) && (form1.age.$touched || form1.$submitted) " >
            <div ng-message="required">This is required</div>
            <div ng-message="minlength">Length is too less</div>

        </div>
        <a data-ng-click="submit(form1.$invalid)">Click</a> 
    </form>

    <script>
    //module declaration
    var app = angular.module('myApp', ['ngMessages']);
    //controller declaration
    app.controller('myCtrl', function($scope) {
        var submit = function(invalid){
            if(invalid) return;
        }
    });
    </script>
</body>
</html>
JavaScript angularjs 使用指令

评论

2赞 Poyraz Yilmaz 3/14/2016
添加 Angular 消息 JS 文件。ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-messages.js
0赞 Zakaria 3/14/2016
未显示 ng-message 的可能重复项
0赞 Deadpool 3/14/2016
这个问题是完全不同的。我的要简单得多,并且与基于$touched和整数操作的 1 个单输入的验证有关。

答:

4赞 martinczerwi 3/14/2016 #1

您的年龄输入没有 .Validation alá minlength 仅在以下情况下有效:ng-modelng-model

<input type="text" name="age" ng-model="age" ng-minlength="3" required/> 

这是由于验证者的工作方式。$valid当 ng-model 为 false 时,您会注意到 ng-model 未设置。文档中也总是有一个提示:https://docs.angularjs.org/api/ng/directive/ngMinlength

也不需要与字段名称相同。ng-model