checkbox validation angularjs

Question

I have multiple checkboxes for a question.Atleast one checkbox needs to be selected.If none of the checkboxes get selected form should through validation error.Did i miss anything. Any ideas on how I would be able to achieve this behaviour? My .JS code:

$scope.onCheckBoxSelected=function(){

                            var flag=false;
                            for(var key in selectedOptions){
                                console.log('Key -' +key +' val- '+selectedOptions[key]);
                                if(selectedOptions[key]){
                                    flag=true;
                                }
                            }
                            if(!flag){
                                selectedOptions=undefined;
                            }
                        };

below is my html code :

<div class="grid">
    <div class="col flex-10  mandatoryField" ng-class="{error: (!selectedOptions && formMissingFields)}">Hello please select atleast one</div>
    <div class="col flex-2">
    </div>
    <div class="col flex-5">

        <div style="padding-top: 2px">
            <input type="checkbox" name="apple" title="Select type" value="apple" ng-model="apple" ng-change="onCheckBoxSelected()">apple
            </input>
        </div>
        <div style="padding-top: 2px">
            <input type="checkbox" name="orange" title="Select type" value="orange" ng-model="orange" ng-change="onCheckBoxSelected()">orange
            </input>
        </div>
        <div style="padding-top: 2px">
            <input type="checkbox" name="banana" title="Select type" value="banana" ng-model="banana" ng-change="onCheckBoxSelected()">banana
            </input>
        </div>

    </div>

</div>

Oscar · Accepted Answer · 2017-07-06 16:21:59Z

0

You can keep it simpler, without the need of the ngChange event.

<div ng-class="{error: !apple && !orange && !banana">Hello please select atleast one</div>

answered Jul 6, 2017 at 16:21

Oscar

661 silver badge5 bronze badges

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

1 Comment

vaibhav Over a year ago

Thank you..!! works as expected without need of ngChange event

Chihuahua Enthusiast · Accepted Answer · 2017-07-06 16:25:08Z

It's best practice to use the AngularJS forms for checkbox validation - it will also help you if you intend on extending your form. You will have to refactor your code to use this functionality.

 <ng-form name="myForm">
    <span style="color:red;" ng-show="myForm.$invalid">Please select one</span>
    <br />
    <!-- your checkbox values will be in "choices" -->
    <p ng-repeat="choice in choices">
      <label class="checkbox" for="{{choice.id}}">
        <input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" ng-required="value.length==0" /> {{choice.label}}
      </label>
    </p>
    <input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
  </ng-form>

See this fiddle - note that it uses underscore.js. Also, this question may help.

Collectives™ on Stack Overflow

checkbox validation angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related