验证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来做到这一点。在点击事件

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

在你的控制器：只需使用一个不同的$scope变量是这样的：

在HTML

$scope.checkInvalid = true; 

这里是一个更新的Fiddle。快乐的编码！