One checkbox should be selected from multiple checkboxs with different ng-model - angularjs

Question

How to validate checkbox with different ng-model??
For e.g:
My HTML looks like:
<form name="myFrm">
<ul>
<li><input type="checkbox" ng-model="sunday" />Sunday</li>
<li><input type="checkbox" ng-model="monday" />Monday</li>
<li><input type="checkbox" ng-model="tuesday" />Tuesday</li>
<li><input type="checkbox" ng-model="wednesday" />Wednesday</li>
<li><input type="checkbox" ng-model="thursday" />Thursday</li>
<li><input type="checkbox" ng-model="friday" />Friday</li>
<li><input type="checkbox" ng-model="saturday" />Saturday</li>
</ul>
<p ng-if="myFrm.$invalid">Atleast one day should be selected</p>
</form>
from the above code, i want to check atleast 1 checkbox should be selected OR give error message.
I've tried searching, but i found the solution in which has a same ng-model, but i have different ng-model for each checkbox.
How to do that??
DEMO JS FIDDLE

Answer 1

Try creating custom directives to do custom validation:
//This directive is to update Form validity when any of the elements decorated
// with customRequired is not empty.
app.directive("customRequiredContainer",function(){
return {
restrict:"A",
require:"form",
controller:function($element,$scope){
var properties = []; //store the list of properties to check.
//customRequired will register the property to be checked.
this.registerProperty = function(property){
if (properties.indexOf(property) === -1){
properties.push(property);
$scope.$watch(property,function(value){
if ($element.form){
//If any of the elements is checked, Form is valid otherwise not valid.
for (var i=0;i<properties.length;i++){
if ($scope[properties[i]]){
//we should use $setValidity(),
//I don't know why it does not work, check that later.
$element.form.$invalid = false;
$element.form.$valid = true;
return;
}
}
$element.form.$invalid = true;
$element.form.$valid = false;
}
});
}
};
},
link:function(scope,element,attrs,formController){
element.form = formController;
}
}
});
//This directive is to decorate which element should be checked for validity
app.directive("customRequired",function(){
return {
restrict:"A",
require:"^customRequiredContainer",
link:function(scope,element,attrs,containerController){
containerController.registerProperty(attrs.ngModel);
}
}
});
HTML:
<form name="myFrm" custom-required-container>
<ul>
<li>
<input type="checkbox" ng-model="sunday" custom-required/>Sunday</li>
<li>
<input type="checkbox" ng-model="monday" custom-required/>Monday</li>
<li>
<input type="checkbox" ng-model="tuesday" custom-required/>Tuesday</li>
<li>
<input type="checkbox" ng-model="wednesday" custom-required/>Wednesday</li>
<li>
<input type="checkbox" ng-model="thursday" custom-required/>Thursday</li>
<li>
<input type="checkbox" ng-model="friday" custom-required />Friday</li>
<li>
<input type="checkbox" ng-model="saturday" custom-required />Saturday</li>
</ul>
<p ng-if="myFrm.$invalid">Atleast one day should be selected</p>
</form>
DEMO
Or this:
<form name="myFrm">
<ul>
<li>
<input type="checkbox" name="sunday" ng-model="sunday" required/>Sunday</li>
<li>
<input type="checkbox" name="monday" ng-model="monday" required />Monday</li>
<li>
<input type="checkbox" name="tuesday" ng-model="tuesday" required />Tuesday</li>
<li>
<input type="checkbox" name="wednesday" ng-model="wednesday" required />Wednesday</li>
<li>
<input type="checkbox" name="thursday" ng-model="thursday" required />Thursday</li>
<li>
<input type="checkbox" name="friday" ng-model="friday" required />Friday</li>
<li>
<input type="checkbox" name="saturday" ng-model="saturday" required />Saturday</li>
</ul>
<p ng-if="myFrm.sunday.$error.required&&myFrm.monday.$error.required
&&myFrm.tuesday.$error.required&&myFrm.wednesday.$error.required
&&myFrm.thursday.$error.required&&myFrm.friday.$error.required
&&myFrm.saturday.$error.required">Atleast one day should be selected</p>
</form>
DEMO
Explanation:
By giving the inputs names: name="sunday", angular will add the input name as a property of the form: myFrm.sunday. From then, we can check whether the input is selected using its $error.required property.
Or this:
<form name="myFrm">
<ul>
<li>
<input type="checkbox" ng-model="sunday" />Sunday</li>
<li>
<input type="checkbox" ng-model="monday" />Monday</li>
<li>
<input type="checkbox" ng-model="tuesday" />Tuesday</li>
<li>
<input type="checkbox" ng-model="wednesday" />Wednesday</li>
<li>
<input type="checkbox" ng-model="thursday" />Thursday</li>
<li>
<input type="checkbox" ng-model="friday" />Friday</li>
<li>
<input type="checkbox" ng-model="saturday" />Saturday</li>
</ul>
<p ng-if="!sunday&&!monday&&!tuesday&&!wednesday&&
!thursday&&!friday&&!saturday">Atleast one day should be selected</p>
</form>
DEMO