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?

Joseph · Accepted Answer · 2015-10-17 01:48:09Z

19

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()">

edited Oct 17, 2015 at 1:48

answered Oct 17, 2015 at 1:11

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Actively Over a year ago

Thanks this is perfect.

Chinmay235 Over a year ago

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...

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related