Validation for ng-repeat checkboxes requires all to be checked once

Question

I would like some help with this issue.

I am currently making validation for my application. The application is a quiz and I would like to have every question to be required (not empty). With dropdowns and text I can simply check the form if this is the case, however with checkboxes, there is something faulty. It requires all checboxes to be checked once before it is deemed valid.

My code:

<form name="testForm" novalidate ng-submit="vm.success(testForm)">

    <div ng-repeat="question in vm.currentQuestions">

          <div class="item-accordion" ng-repeat="choice in question.Answers">

            <ion-item class="item item-checkbox">
                <label class="checkbox">
                    <input type="checkbox" ng-model="placeholder" name="{{question.QuestionId}}" ng-change="vm.checkboxAnswer(choice)" ng-required="true">
                </label>
                    {{choice.Text}}
            </ion-item>

           </div>

    </div>

</form>

When I console log the form controller, I can see the validation checks for this input, however nothing ($valid, $error, $dirty) changes. I don't understand why nothing changes. Only when I have checked all boxes once, will $valid turn true, but I need $valid to be turned to true if only 1 checkbox has been checked.

@AlekseySolovey It seems to work fine with text and dropdown type inputs though. — J. Doe, Dec 21 '17 at 13:31
is this what you are looking for: [Using the HTML5 “required” attribute for a group of checkboxes? Ask](https://stackoverflow.com/questions/6218494/using-the-html5-required-attribute-for-a-group-of-checkboxes) ? — Aleksey Solovey, Dec 21 '17 at 13:34
@AlekseySolovey I am using ng-required, which is a feature of Angular. It is basically the same, but it's also where the problem lies. Because of ng-repeat, it forces every checkbox to be required true. — J. Doe, Dec 21 '17 at 13:37
Try this: https://stackoverflow.com/questions/19632933/angularjs-group-check-box-validation — mTv, Dec 21 '17 at 13:38
@mTv it worked! Thanks. If I could accept your answer, I would! — J. Doe, Dec 21 '17 at 14:17

score 0 · Answer 1 · answered Dec 21 '17 at 14:24

<div ng-repeat="question in vm.currentQuestions">

      <div class="item-accordion" ng-repeat="choice in question.Answers">

        <ion-item class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" ng-model="checkbox" name="{{question.QuestionId}}" ng-change="vm.checkboxAnswer(choice)" ng-required="checkboxValidation()">
            </label>
                {{choice.Text}}
        </ion-item>

       </div>

</div>

you must declare your model in you controller as an empty string :

$scope.checkbox="";

and you must declare returning method that has been invoked by ng-required :

$scope.checkboxValidation=function(){
if($scope.checkbox=='')
return true;
}

score 0 · Answer 2 · answered Dec 21 '17 at 21:45

You can do use another helper function beside your ng-submit, write a function like below:

var questions = [];

function everyChecked() {
   var formValid = true;
   foreach(question in questions) {
        var currentQuestion = false;
        foreach(answer in question.answers) {
            currentQuestion = currentQuestion || answer.value
        }
       formValid = formValid && currentQuestion;
   }

   return formValid;
}

and change your ng-submit to this ng-submit = vm.everyChecked() && vm.success(testForm), you need to have the ng-model of checkboxes properly binded to a field of object to use that value inside your validation function.

Validation for ng-repeat checkboxes requires all to be checked once

2 Answers2