未定义复选框上的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 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>

Answer 2

Mikki Viitala提交的$错误。 根据$submitted的AngularJS文档 ：

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

如果您在<form>上的ng-submit添加函数，即使您因为（例如） $scope.formName.$valid为false而中止了操作，也可以：

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

$submitted仍然为true（并且<form>仍将获得.ng-submitted类）。 <form>完全有可能与CSS选择器form.ng-pristine.ng-submitted匹配（即用户未输入任何内容，但单击了form.ng-pristine.ng-submitted按钮）。

另外，Mikki Viitala的for属性是错误的。 在for上<label>链接的<label>经由任一到输入字段name或id值输入栏（可以是<input> ， <select>等）。 这只是HTML规范的一部分。 它主要用于（例如）当您单击标签上的链接字段时获得关注。

但是<ng-messaages>上的for属性是不同的。 这是一个计算结果为对象的表达式（或dict /关联数组/如果需要的话）。 然后， <ng-message>元素上的每个when="blah"属性都控制何时显示该特定消息。

$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文档中 。