Question

您好我正在尝试验证自定义复选框但它无效。当取消选中该复选框时我想要获取的内容并且通过单击“发送”按钮提交数据将显示错误消息，就像其他字段一样。当我选中复选框时，错误信息应该消失...

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来执行此操作。只需使用不同的$scope变量，如下所示：

在您的HTML中：

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

在您的点击事件的控制器中：

   $scope.checkInvalid = true;

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

验证angularjs

1 个答案: