未选中复选框以使表单无效

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 添加到表单中的任何建议（如果未选中，反之亦然）。

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的值有条件地放置一个“无效”属性，如下所示：

<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 属性，它将让您知道表单是否已经过验证。