AngularJSを使用した妥当性チェックボックス

Question

私は1つのフォームを持っていますが、チェックボックスを検証しようとすると、異なるバリデーションがあるため、1つのチェックリストが1つあり、 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="age"別のものと場合がid="term"別及び場合は何もチェックされている場合は、1つの検証を行いませんid="topic"検証をどのように行うことができますが、メッセージが表示されます。

Answer 1

現在、anglejsを使用していますので、jqueryで考えるのをやめてください。 ここではjqueryを使う必要はありません。だから、あなたがして、チェックボックスの年齢のブール値にアクセスすることができます

ng-model="age" 

：ブール値は、あなたのようなhtml要素で定義するモデル内にある複数のエラーメッセージを使用したい場合は

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