Make checkboxes required AngularJS

Question

I have a form where users have to answer questions through checkboxes. There are quite few checkboxes and I'm using AngularJS in the form to validate it. A basic validation is that all the required fields are filled.

Below is my example code:

<input type="checkbox" name="skills"> IT
<input type="checkbox" name="skills"> Design
<input type="checkbox" name="skills"> Photoshop
<input type="checkbox" name="skills"> Writing

Now I want the checkboxes to be required so from the "skills" checkboxes the user atleast checks 1 box.

I've tried putting the required tag but it didn't seem to work.

Im using AngularJS to validate my form like so

<button ng-disabled="myForm.$invalid">Submit</button>

Any idea how I can fix this? If you can working fiddle that would great.

It depends on your ng-model. If you are filling all the values into an array then you can do myArray.length — nivas
– nivas, Commented Feb 1, 2017 at 11:01
@nivas as more then 1 item can be checked I use a JavaScript function to loop through all the checkboxes and push all the "checked" boxes into an array. And send that array to my server. So didn't use the ng-model. — Skywalker
– Skywalker, Commented Feb 1, 2017 at 11:04
@nivas true. I can check array length but the array is only populated when I submit the form because thats when the functions loops through the checkboxes. Without "submitting" the form the array will always be empty even though the user has checked multiple boxes. — Skywalker
– Skywalker, Commented Feb 1, 2017 at 11:12
use ng-change event of checkbox and call a function in that that push element when user checks the checkbox and pop when user untick the checkbox so on form submission check the length of array if its empty then show him popup or alert message. — Abhishekkumar
– Abhishekkumar, Commented Feb 1, 2017 at 11:17

fatema · Accepted Answer · 2017-02-01 12:23:34Z

If you want to validate using ng-disabled="myForm.$invalid"

  var app = angular.module('myModule', []);

        app.controller("myController", function ($scope) {
            $scope.choices = [{"name":"IT"},{"name":"Design"},{"name":"Technology"}];
            $scope.checkBoxArray = [];
            $scope.validate = function (value) {
                if ($scope.checkBoxArray.indexOf(value) == -1){
                    $scope.checkBoxArray.push(value);
                }
                else {
                    $scope.checkBoxArray.splice($scope.checkBoxArray.indexOf(value), 1);
                }
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myModule">
  <body ng-controller="myController">
<ng-form name="myForm">
    <span  ng-repeat="choice in choices">
        <input type="checkbox" name="skills" ng-required="checkBoxArray.length==0" ng-model="choice.checked" ng-change="validate(choice.name)">
        {{choice.name}}
    </span>
</ng-form>
<button ng-disabled="myForm.$invalid">Submit</button>
</body>
</html>

Mohammed · Accepted Answer · 2017-02-01 11:25:46Z

2

Try this working demo :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <form name="checkBoxForm">
       <input type="checkbox" name="skills" ng-model="IT">IT
       <input type="checkbox" name="skills" ng-model="Design">Design
       <input type="checkbox" name="skills" ng-model="Photoshop">Photoshop
       <input type="checkbox" name="skills" ng-model="Writing">Writing

    <button ng-disabled="!IT&&!Design&&!Photoshop&&!Writing">Submit</button>
  </form>
</div>

edited Feb 1, 2017 at 11:25

Mohammed

6582 gold badges12 silver badges33 bronze badges

answered Feb 1, 2017 at 11:19

Rohìt Jíndal

27.3k16 gold badges80 silver badges133 bronze badges

Comments

Alexandre Nascimento · Accepted Answer · 2017-02-01 11:47:18Z

0

You can use a array to do this:

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {

$scope.collection=[{
                  "Name": "IT"},
              {
                  "Name": "Design"},
              {
                  "Name": "Photoshop"},
              {
                  "Name": "Writing"}];

$scope.disableButton = true;

$scope.doTheThings = function (item)
  {
    if (item.checked) 
      $scope.disableButton = true;
    else 
      $scope.disableButton = false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul>
 <li ng-repeat="item in collection">
  <input type="checkbox" name="skills" ng-model="item.checked" ng-click="doTheThings(item)"> {{item.Name}}
 </li>
</ul>
<button ng-disabled="disableButton"> Submit </button>
 </form>
</div>

answered Feb 1, 2017 at 11:47

Alexandre Nascimento

1831 gold badge5 silver badges20 bronze badges

1 Comment

anu g prem Over a year ago

Some bugs are there in this answer. when you click more than one checkbox and uncheck a checkbox, then the submit button disables even if there are some checkboxes are already checked.

Collectives™ on Stack Overflow

Make checkboxes required AngularJS

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related