validate the custom checkbox in angularjs - angularjs

Question

hi i am trying to validate custom checkbox but it is not working. what i want to acquire when the checkbox is unchecked and i submit the data by clicking on send button there will show a error message, like other fields. and when i checked the checkbox the error message should be disappear...
here is the code Link 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 Sumsung Privacy Policy</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

You could just put a model on your checkbox and and test for the value:
<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 Sumsung Privacy Policy</label>
</div>
</div>
<div ng-show="!checkbox2">
This is required
</div>
Here is an update to your fiddle
Here's an update per your comment:
You can still use ng-model to do that. Just use a different $scope variable like this:
In your HTML:
<div ng-show="checkInvalid">
This is required
</div>
In your Controller on your click event:
$scope.checkInvalid = true;
Here is an updated Fiddle. Happy coding!