How to require at least 1 checkbox for AngularJS Form Validation?

Question

I have an array of JSON objects which is displayed in a form. I would like to have the form validation work where a user has to select at least one checkbox for the entire form to be valid.

I know that the ng-required can be used but with the implementation I have, it means that all of them have to be selected for it to be valid.

Here is the code I have so far:

index.html:

<div ng-repeat="item in volunteerOptions">
    <label class="checkbox"><input type="checkbox" value="" data-ng-model="item.selected" ng-required="true">{{ item.content }}</label>
</div>

<button type="submit" class="btn btn-success" ng-disabled="!memberRegistrationForm.$valid">Submit</button>

controller.js

$scope.volunteerOptions = [
        { content : 'Content 1', selected : false },
        { content : 'Content 2', selected : false },
        { content : 'Content 3', selected : false },
        { content : 'Content 4', selected : false },
];

Any ideas on how I would be able to achieve this behaviour?

Solution

You can add another scope property and use array.some to check if any of the selected are true. Then feed that scope property to ng-required. Something like

$scope.isOptionsRequired = function(){
  return !$scope.volunteerOptions.some(function(options){
    return options.selected;
  });
}

<input type="checkbox" value="" data-ng-model="item.selected" ng-required="isOptionsRequired()">

Comments

[Actively]

Thanks this is perfect.

[Chinmay235]

This is working fine. But how to show error message below the checkboxes. I used this one - <div ng-show="projectForm.$submitted || projectForm.item_id.$touched"> <span ng-show="projectForm.item_id.$error.required" class="text-danger">Select any Item.</span> </div> this error message working fine but when i applyed item_id in checkbox name property. I got all checked when i check any one. Please help me...