复选框上的ngMessage验证未定义

时间:2015-05-31 20:53:13

标签: javascript angularjs

我有以下代码:

 <label for="over_13">
    <input type="checkbox" name="over_13" ng-model="user.over_13" ng-required="user.over_13==true">
    <span>I'm over 13</span>
 </label>

    <ng-messages class="modal-error" for="registerForm.over_13.$error" ng-show="registerForm.$submitted" class="error-message">
        <ng-message when="required">Are you over 13 years old?</ng-message>
    </ng-messages>

但是当我运行它时,我通过chrome inspect

在页面的HTML中得到了关注
<ng-messages class="modal-error ng-inactive" for="registerForm.over_13.$error" ng-show="registerForm.$submitted">
        <!-- ngMessage: undefined -->
    </ng-messages>

我错过了什么吗?

同样使用required代替ng-required会产生相同的错误。

 <label for="over_13">
    <input type="checkbox" name="over_13" ng-model="user.over_13" required>
    <span>I'm over 13</span>
 </label>

2 个答案:

答案 0 :(得分:0)

您滥用for,它需要一个具有相同id的元素。所以它不能与name合作,绝对不能与$error合作。

为什么ng-show ng-message ng-show="registerForm.$submitted"的条件为required,因为您无法提交表单,因为复选框为class。此外,您已经两次声明<form name="registerForm"> <label> <input type="checkbox" name="over_13" ng-model="user.over_13" required> <span>I'm over 13</span> </label> <ng-messages ng-show="registerForm.over_13.$invalid"> <ng-message when="required">Are you over 13 years old?</ng-message> </ng-messages> </form> 属性。

令人困惑,但这应该有用。

(0, 0)

答案 1 :(得分:0)

Mikki Viitala提交的$是错误的。根据{{​​1}}的{​​{3}}:

  

如果用户提交了表单,即使其无效,也为真。

如果您在$submitted上向ng-submit添加了一项功能,即使您因为(例如)<form>为假而中止了该操作:

$scope.formName.$valid

$scope.submit = function () { if (!$scope.formName.$valid) { // $scope.formName.$submitted === true return; } }; 仍然是正确的($submitted仍将获得<form>类。完全可能有一个.ng-submitted,其中CSS选择器<form>匹配(即用户没有输入任何内容,但点击了提交按钮)。

此外,Mikki Viitala对form.ng-pristine.ng-submitted属性有误。 for上的for通过输入字段上的<label><label>值将name链接到输入字段(可能是id },<input>等)。这只是HTML规范的一部分。它主要用于(例如)点击标签时,链接字段获得焦点的目的。

<select>上的for属性不同。它是一个表达式,可以计算一个对象(或者dict / associative array /如果你愿意的话)。然后,<ng-messaages>元素上的每个when="blah"属性都会控制何时显示该特定消息。

<ng-message>返回一个对象,其中每个属性对应一种验证类型。例如,如果某个字段被标记为必需,则$scope.formName.fieldName.$error是一个布尔值,如果该字段有值,则为true;如果不存在,则为false。

$scope.formName.fieldName.$error.required按顺序遍历其下的所有<ng-messages>元素,使用<ng-message>或(when="string")从when="string1, string2"的结果中提取属性直到其中一个为真,然后它显示一个(即when="object"元素的顺序可能很重要取决于你想要实现的目标。)

这一切都在AngularJS docs