Make checkboxes required AngularJS - Photoshop

SkyWalker
February 1, 2017
83 views
2 votes
3 Answers

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.

Answers

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>

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Make checkboxes required AngularJS – Photoshop

Answers