Angular.js required at least one checkbox [duplicate]

Question

I wouldn't be surprised if this is a duplicate however I can't find anything simple along the lines of what I need.

All I need is the user to be required to choose at least one checkbox but I'm baffled how to accomplish this.

    <input type="checkbox" ng-model="myForm.first" /> First <br />
    <input type="checkbox" ng-model="myForm.second" />Second <br />
    <input type="checkbox" ng-model="myForm.third" /> Third

khalid13 · Accepted Answer · 2014-11-17 18:47:51Z

6

<input type="checkbox" ng-model="myForm.first" ng-required="myForm.first || myForm.second || myForm.third" /> First <br />
<input type="checkbox" ng-model="myForm.second" ng-required="myForm.first || myForm.second || myForm.third"/>Second <br />
<input type="checkbox" ng-model="myForm.third" ng-required="myForm.first || myForm.second || myForm.third"/> Third

answered Nov 17, 2014 at 18:47

khalid13

2,8572 gold badges31 silver badges48 bronze badges

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

3 Comments

Binnut Over a year ago

I tried this approach and found that this required me to select none or all of the checkboxes. In the case that none is checked, ng-required is false for all of them, making validation succeed. If only first is checked, all checkboxes becomes required which causes the validation to fail. If all is checked, all is required, and validation succeeds.

Binnut Over a year ago

Using !(myForm.first || myForm.second || myForm.third) seems to work fine however.

Kabachok Over a year ago

and if you have 20 checkboxes? this solution is good only if you have just a few

BeingDev · Accepted Answer · 2014-11-17 19:06:24Z

0

HTML

<div ng-app="myApp" ng-controller="myCrtl as myForm">
    <input type="checkbox" ng-required="myForm.selectedOptions" ng-model="myForm.selectedOptions.first" ng-change="myForm.onCheckBoxSelected()" /> First <br />
    <input type="checkbox" ng-required="myForm.selectedOptions" ng-model="myForm.selectedOptions.second"  ng-change="myForm.onCheckBoxSelected()"/>Second <br />
    <input type="checkbox" ng-required="myForm.selectedOptions" ng-model="myForm.selectedOptions.third"  ng-change="myForm.onCheckBoxSelected()"/> Third<br/>
    <span style="color:red;" ng-if="!myForm.selectedOptions ">Required</span>
</div>

JS

angular.module('myApp',[])
    .controller('myCrtl',function(){
        var myForm=this;
        myForm.onCheckBoxSelected=function(){

        var flag=false;
        for(var key in myForm.selectedOptions){

            if(myForm.selectedOptions[key]){
                flag=true;
            }
        }
        if(!flag){
            myForm.selectedOptions = undefined;
        }
   };

 });

JS fiddle : http://jsfiddle.net/fodyyskr/

answered Nov 17, 2014 at 19:06

BeingDev

4262 gold badges8 silver badges25 bronze badges

2 Comments

britter Over a year ago

This isn't the correct use of ng-required. Your example can be implemented without ng-required like so: jsfiddle.net/yzjugv90

Binod Kalathil Over a year ago

@britter that is awesome!

Collectives™ on Stack Overflow

Angular.js required at least one checkbox [duplicate]

2 Answers 2

3 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Linked

Related