Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS group check box validation

I have a list of check boxes, of which at least one is compulsory. I have tried to achieve this via AngularJS validation, but had a hard time. Below is my code:

// Code goes here for js 

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

function Ctrl($scope) {
  $scope.formData = {};
  $scope.formData.selectedGender = '';
  $scope.gender = [{
    'name': 'Male',
    'id': 1
  }, {
    'name': 'Female',
    'id': 2
  }];
  $scope.formData.selectedFruits = {};
  $scope.fruits = [{
    'name': 'Apple',
    'id': 1
  }, {
    'name': 'Orange',
    'id': 2
  }, {
    'name': 'Banana',
    'id': 3
  }, {
    'name': 'Mango',
    'id': 4
  }, ];
  $scope.submitForm = function() {

  }
}
// Code goes here for html
<!doctype html>
<html ng-app="App">

<head>
  <!-- css file -->
  <!--App file -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
  <!-- External file -->
</head>

<body>
  <div ng-controller="Ctrl">
    <form class="Scroller-Container">
      <div ng-app>

        <form class="Scroller-Container" ng-submit="submit()" ng-controller="Ctrl">
          <div>
            What would you like?
            <div ng-repeat="(key, val) in fruits">
              <input type="checkbox" ng-model="formData.selectedFruits[val.id]" name="group[]" id="group[{{val.id}}]" required />{{val.name}}
            </div>
            <br />
            <div ng-repeat="(key, val) in gender">
              <input type="radio" ng-model="$parent.formData.selectedGender" name="formData.selectedGender" id="{{val.id}}" value="{{val.id}}" required />{{val.name}}
            </div>
            <br />
          </div>
          <pre>{{formData.selectedFruits}}</pre>
          <input type="submit" id="submit" value="Submit" />
        </form>
      </div>
      <br>
    </form>
  </div>
</body>

</html>

Here is the code in plunker: http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview Has anyone done this on AngularJS? Making the checkboxes required, forces me to select all the checkbox values. This problem is also not documented in the AngularJS documentation.

like image 481
Pradeep Jaiswar Avatar asked Oct 28 '13 10:10

Pradeep Jaiswar


4 Answers

If you want to require at least one item in group being selected, it's possible to define dynamic required attribute with ng-required.

For gender radio buttons this would be easy:

<input
    type="radio"
    ng-model="formData.selectedGender"
    value="{{val.id}}"
    ng-required="!formData.selectedGender"
>

Checkbox group would be easy too, if you used array to store selected fruits (just check array length), but with object it's necessary to check if any of values are set to true with filter or function in controller:

$scope.someSelected = function (object) {
  return Object.keys(object).some(function (key) {
    return object[key];
  });
}
<input
    type="checkbox"
    value="{{val.id}}"
    ng-model="formData.selectedFruits[val.id]"
    ng-required="!someSelected(formData.selectedFruits)"
>

Update:

const someSelected = (object = {}) => Object.keys(object).some(key => object[key])

Also keep in mind that it will return false if value is 0.

like image 185
Klaster_1 Avatar answered Nov 18 '22 10:11

Klaster_1


Thanks to Klaster_1 for the accepted answer. I've built on this by using ng-change on the checkbox inputs to set a local scope variable, which would be used as the ng-required expression. This prevents the running of someSelected() on every digest.

Here is a plunkr demonstrating this: http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/

Here is the HTML and JS for posterity.

<!DOCTYPE html>
<html ng-app="App">

<head>
  <meta charset="utf-8" />
  <script data-require="[email protected]" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="AppCtrl">
    <form class="Scroller-Container" name="multipleCheckbox" novalidate="">
      <h3>What would you like?</h3>
      <div ng-repeat="fruit in fruits">
        <input type="checkbox" ng-model="formData.selectedFruits[fruit.name]" ng-change="checkboxChanged()" ng-required="!someSelected" /> {{fruit.name}}
      </div>
      <p style="color: red;" ng-show="multipleCheckbox.$error.required">You must choose one fruit</p>
    </form>
    <pre>Fruits model:
{{formData.selectedFruits | json}}</pre>
  </div>
</body>

</html>
angular
  .module('App', [])
  .controller('AppCtrl', function($scope) {

    var selectedFruits = {
      Mango: true
    };

    var calculateSomeSelected = function() {
      $scope.someSelected = Object.keys(selectedFruits).some(function(key) {
        return selectedFruits[key];
      });
    };

    $scope.formData = {
      selectedFruits: selectedFruits
    };

    $scope.fruits = [{
      'name': 'Apple'
    }, {
      'name': 'Orange'
    }, {
      'name': 'Banana'
    }, {
      'name': 'Mango'
    }];

    $scope.checkboxChanged = calculateSomeSelected;

    calculateSomeSelected();
  });
like image 35
Tom Spencer Avatar answered Nov 18 '22 10:11

Tom Spencer


Okay maybe very late to the party but if you have an array of objects which you are looking at, the solution of just checking the length of array of selected objects worked for me.
HTML

<div ng-repeat="vehicle in vehicles">
    <input type="checkbox" name="car" ng-model="car.ids[vehicle._id]" ng-required=" car.objects.length <= 0"> {{vehicle.model}} {{vehicle.brand}} <b>{{vehicle.geofenceName}}</b>
</div>

JS

$scope.vehicles = [{},{}] // Your array of objects;
$scope.car = {
    ids: {},
    objects: []
};

$scope.$watch(function() {
    return $scope.car.ids;
}, function(value) {
    $scope.car.objects = [];
    angular.forEach($scope.car.ids, function(value, key) {
        value && $scope.car.objects.push(getCategoryById(key));
    });
}, true);

function getCategoryById(id) {
    for (var i = 0; i < $scope.vehicles.length; i++) {
        if ($scope.vehicles[i]._id == id) {
            return $scope.vehicles[i];
        }
    }
}

I understand what is happening in this solution that you are checking all the checkbox options to know which one is clicked. But from what I know this is by far the easiest solution(to understand and implement) and it works like a charm if you know that your options will be limited. For a more time optimized solution. Check the answers above.

like image 2
Saras Arya Avatar answered Nov 18 '22 10:11

Saras Arya


We can achieve your requirement without traversing all check-boxes instance. Here is the sample code

<script>
angular.module('atLeastOneExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.e = function(s){
    eval(s);
  };
}]);
</script>

Here i am wrapping javascript eval function in "e" function to access it.

<form name="myForm" ng-controller="ExampleController" ng-init="c=0">
  <label>
      Value1: <input type="checkbox" ng-model="checkboxModel.value[0]" ng-change="e('($scope.checkboxModel.value[0])?$scope.c++:$scope.c--')"/>
  </label><br/>
  <label>
      Value2: <input type="checkbox" ng-model="checkboxModel.value[1]" ng-change="e('($scope.checkboxModel.value[1])?$scope.c++:$scope.c--')"/>
  </label><br/>
  value = {{checkboxModel.value}}<br/>
  isAtLeastOneChecked = {{c>0}}
</form>
like image 1
Vivek Kumar Avatar answered Nov 18 '22 10:11

Vivek Kumar