angularjsのカスタムチェックボックスを有効にします

Question

こんにちは私はカスタムチェックボックスを検証しようとしていますが、動作していません。チェックボックスをオフにして送信ボタンをクリックしてデータを送信すると、他のフィールドと同様にエラーメッセージが表示されます。そして私は、チェックボックスをチェックすると、エラーメッセージが消えなければなりません...ここ

は、コードのリンクであるhttps://jsfiddle.net/epn9s55x/

Htmlの

<div class="form-row"> 
      <div class="privacy-container"> 
        <input type="checkbox" id="check1"> 
       <label class="privacy-text" for="check1">If you are bussiness to bussiness (B2B) customer,tick the box</label> 
      </div> 
      <div class="privacy-container sumsung-privacy"> 
       <input type="checkbox" id="check2"> 
       <label class="privacy-text" for="check2">I acknowladge my information will be processed in accordance with the <a href="#">Sumsung Privacy Policy</a></label> 
      </div> 

    </div> 

JS

var myApp = angular.module('myApp', []); 
myApp.directive('match', function($parse) { 

    return { 
     require: 'ngModel', 
     link: function(scope, elem, attrs, ctrl) { 
      scope.$watch(function() { 
       return $parse(attrs.match)(scope) === ctrl.$modelValue; 
      }, function(currentValue) { 
       console.log("mismatched directive"); 
       ctrl.$setValidity('mismatch', currentValue); 
      }); 
     } 
    }; 
}); 
myApp.controller("myController", ['$scope', '$location','$anchorScroll',function($scope,$location, $anchorScroll){ 
    $scope.showMsgs = false; 
    $scope.send = function(form){ 
     if ($scope[form].$valid) { 
      $scope.showMsgs = false; 
     } else { 
      $scope.showMsgs = true; 
      $location.hash('mainContainer'); 
      $anchorScroll(); 

     } 
    } 
}]); 

のCss

/*css for check box*/ 
     [type="checkbox"]:not(:checked), 
     [type="checkbox"]:checked { 
      position: absolute; 
     } 
     [type="checkbox"]:not(:checked) + label, 
     [type="checkbox"]:checked + label { 
      position: relative; 
      padding-left: 2.75em; 
      cursor: pointer; 
      min-width: 300px; 
      width: 95%; 
      box-sizing: border-box; 
      font-size: 14px; 
      display: block; 
      font-weight: bold 
     } 

     /* checkbox aspect */ 
     [type="checkbox"]:not(:checked) + label:before, 
     [type="checkbox"]:checked + label:before { 
      content: ''; 
      position: absolute; 
      left: 0; 
      top: 0; 
      width: 1.35em; 
      height: 1.35em; 
      border: 2px solid #000; 
      background: #fff; 


     } 
     /* checked mark aspect */ 
     [type="checkbox"]:not(:checked) + label:after, 
     [type="checkbox"]:checked + label:after { 
      content: ""; 
      position: absolute; 
      top: .18em; 
      left: .18em; 
      font-size: 1.3em; 
      line-height: 0.8; 
      color: #09ad7e; 
      width: .86em; 
      height: .86em; 
      background: #000; 
      transition: all .2s; 
     } 
     /* checked mark aspect changes */ 
     [type="checkbox"]:not(:checked) + label:after { 
      opacity: 0; 
      transform: scale(0); 
     } 

     /*End of css of check boxes*/ 

Answer 1

あなただけの価値のためにあなたのチェックボックスにモデルを入れて、テストできます。

   <input type="checkbox" id="check2" ng-model="checkbox2"> 
      <label class="privacy-text" for="check2">I acknowladge my information will be processed in accordance with the <a href="#">Sumsung Privacy Policy</a></label> 
     </div> 

    </div> 
    <div ng-show="!checkbox2"> 
    This is required 
    </div> 

をここにあなたのfiddle

へのアップデートは、ここにあなたのコメントあたりの更新ですされています

これを行うにはまだng-modelを使用できます。あなたのHTMLで

：ちょうどこのような異なる$scope変数を使用して、あなたのコントローラで

 <div ng-show="checkInvalid"> 
    This is required 
    </div> 

をあなたのクリックイベントに：

ここ

$scope.checkInvalid = true; 

が更新Fiddleです。ハッピーコーディング！