Question

我有以下代码：

 <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>

Answer 1

您滥用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)

Answer 2

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。

复选框上的ngMessage验证未定义

2 个答案: