使用 AngularJS 的验证复选框

Question

我有一个表单，但是当我尝试验证复选框时，我遇到了一个问题，因为验证不同，一个验证是一个列表，您必须选中其中一个，然后在表单末尾我得到 2 个复选框如果您年满 16 岁，则对隐私政策和其他内容进行更多验证，但验证我已经检查了表单的所有复选框，并且不区分它是来自列表还是另一个复选框

表格：

<form id="formDetails" name="formDetails" ng-submit="sendForm()">
    <div>
        <p><strong>Select areas of interest:*</strong></p>
    </div>
    <div class="col-xs-12 col-md-12">
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Children's</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Health & Beauty</label>
         </div>
         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Science & Nature</label>
         </div>

         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Crafts & Hobbies</label>
         </div>
         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">History</label>
         </div>
         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Sports & Fitness</label>
          </div>
      </div>
      <div class="col-xs-12 col-md-12 policy">
          <div class="form-group col-xs-12 col-sm-6 col-md-12 form-info check-policy">
              <label class="checkbox-inline">
                  <input type="checkbox" ng-model="age" id="age" name="age">I can confirm I am over 16 years of age
                  <span class="error" ng-show="error">Please confirm you are over 16</span>
              </label>

          </div>
          <div class="form-group col-xs-12 col-sm-6 col-md-12 form-info">
              <label class="checkbox-inline">
                  <input type="checkbox" ng-model="terms" id="terms" name="terms">I agree to the terms of the Privacy Policy
                  <span class="error" ng-show="error">Please agree to the terms of the Privacy Policy</span>
              </label>
           </div>
       </div>
       <div>
           <button type="submit" class="btn btn-danger">Sign Up</button>
       </div>
   </form>

JS

var app = angular.module('formApp', []);
    app.controller('formCtrl', function ($scope) {

    $scope.error = false; 

    $scope.sendForm = function()
    {
        if($("#formDetails input[id=topic]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }

        if($("#formDetails input[id=age]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }

        if($("#formDetails input[id=terms]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }
    }
});

一开始我尝试使用input[type=checkbox]:checked 执行此操作，但这样验证了表单中的所有复选框。

如果是id="topic"进行一次验证，如果id="age" 是另一次验证，如果是id="term" 是另一次验证，如果未选中则显示消息。

Answer 1

您现在正在使用 angularjs，所以请停止在 jquery 中思考。 这里没有必要使用 jquery。布尔值位于您在 html 元素上定义的模型中，例如：

ng-model="age"

因此您可以通过以下方式访问复选框年龄的布尔值：

$scope.age

如果您想使用多个错误消息，您可以使用一个对象而不是布尔值，例如：

if($scope.age == true) {
    $scope.error.age = true; 
}else{
    $scope.error.age = false
}

或者你只是使用ng-show中的模型

<div class="form-group col-xs-12 col-sm-6 col-md-12 form-info">
  <label class="checkbox-inline">
      <input type="checkbox" ng-model="terms" id="terms" name="terms">I agree to the terms of the Privacy Policy
      <span class="error" ng-show="terms">Please agree to the terms of the Privacy Policy</span>
  </label>
</div>

Answer 2

试试这个。希望它会帮助你。

ng-submit="sendForm(formDetails.$valid)"
$scope.sendForm = function()
    {
        if (!status) {
            return false;
        }else{
           //code here
        }
    }