未定义的复选框上的ngMessage验证

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检查在页面的HTML中得到以下内容

<ng-messages class="modal-error ng-inactive" for="registerForm.over_13.$error" ng-show="registerForm.$submitted">
        <!-- ngMessage: undefined -->
    </ng-messages>

我是不是遗漏了什么？

同时，使用required代替ng要求也会产生同样的错误。

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

Answer 2

Mikki对$submitted的看法是错误的。根据AngularJS文档 for $submitted

如果用户提交了表单，即使表单无效，则为True。

如果将一个函数添加到ng-submit上的<form>上，即使您中止该操作，因为(例如) $scope.formName.$valid是假的：

$scope.submit = function () {
   if (!$scope.formName.$valid) {
      // $scope.formName.$submitted === true
      return;
   }
};

$submitted仍然是真的( <form>仍然会得到.ng-submitted类)。完全可能有一个CSS选择器<form>匹配的form.ng-pristine.ng-submitted (即用户没有输入任何内容，但单击了提交按钮)。

另外，Mikki对for属性的看法是错误的。for在<label>上通过输入字段上的name或id值(可以是<input>、<select>等)将<label>链接到输入字段。这只是HTML规范的一部分。它主要用于(例如)单击标签时，链接字段将获得焦点。

但是，for属性在<ng-messaages>上是不同的。它是一个表达式，它的计算结果是一个对象(或者dict/关联数组/如果您愿意的话)。然后，when="blah"元素上的每个<ng-message>属性控制何时显示该特定消息。

$scope.formName.fieldName.$error返回一个对象，其中每个属性对应于一种验证类型。例如，如果字段被标记为必需，则$scope.formName.fieldName.$error.required是一个布尔值，如果该字段有值，则为true；如果没有，则为false。

<ng-messages>按照顺序遍历它下面的所有<ng-message>元素，使用when="string"或(when="string1, string2")从when="object"的结果中提取属性，直到它们中的一个为真为止，然后显示该属性(即，<ng-message>元素的顺序取决于您想要获得的是什么)。

这一切都在AngularJS ngMessage文档中。