未选中复选框使表单无效

Question

尝试为我的表单中的复选框添加表单验证器，以防未选中时表单将具有 ng-invalid.

<li class="terms_checkbox"><input type="checkbox" id="checkbox_terms" name="terms" /><label for="checkbox_terms"></label></li>
<li class="accept">I have read and accept the terms and conditions</li>

任何关于什么可以触发将 ng-invalid 添加到表单的建议，如果它未被选中，反之亦然以删除 class。

Answer 1

您需要做的就是在复选框上添加 required 属性和 ng-model，以便在表单验证期间进行检查。

<li class="terms_checkbox">
   <input type="checkbox" 
       id="checkbox_terms" name="terms" ng-model="agreement" required />
   <label for="checkbox_terms"></label>
</li>

angular.module('app', []).controller('ctrl', function($scope) {

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <form name="form" novalidate>
    <ul>
      <li class="terms_checkbox">
        <input type="checkbox" id="checkbox_terms" name="terms" ng-model="agreement" required />
        <label for="checkbox_terms"></label>
      </li>
      <li class="accept">I have read and accept the terms and conditions</li>
      <li>
        <button ng-disabled="form.$invalid">Submit</button>
      </li>
    </ul>
  </form>
</div>

Answer 2

嗯，对于初学者来说，这不是一个表格。如果你想保持这个结构，你可以简单地在复选框上应用一个模型，并根据 $scope.checked 的值有条件地放置一个 "invalid" 属性，像这样：

<ul>
  <li class="terms_checkbox">
    <input ng-model="checked" type="checkbox" id="checkbox_terms" name="terms" />
    <label for="checkbox_terms"></label>
  </li>
  <li class="accept">I have read and accept the terms and conditions</li>
</ul>

但是，我建议将它包围在一个实际的表单中，并将 required 属性放在复选框上。这 :

<form name="myForm">
  <ul>
    <li class="terms_checkbox">
      <input type="checkbox" id="checkbox_terms" name="terms" required />
      <label for="checkbox_terms"></label>
    </li>
    <li class="accept">I have read and accept the terms and conditions</li>
  </ul>
</form>

现在，如果您检查 $scope.myForm.$invalid 属性，它会让您知道表单是否已经过验证。

未选中复选框使表单无效

checkbox unchecked to make form invalid

angularjs

angularjs-ng-model

angularjs-validation