Angularjs checkbox group min and max validation restriction

Question

I need to validate(restrict min and max selection) check box group using angular. Is there any directive to achieve this validation on angular.

<html ng-app="app">
<head>
    <title>AngularJS Routing</title>
    <script src="http://code.angularjs.org/1.2.7/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', []);

        app.controller('CHKctrl', function ($scope) {
            $scope.data = [{ "name": "CHK 1" },
                         { "name": "CHK 2" },
                         { "name": "CHK 3" },
                         { "name": "CHK 4" },
                         { "name": "CHK 5" },
                         { "name": "CHK 6" }];
        });
    </script>
</head>
<body ng-controller="CHKctrl">
    <form name="form">
        <label ng-repeat="d in data">
            <input 
                type="checkbox"
                ng-model="d.value"
                minlength="2"
                maxlength="4"/>
                {{d["name"]}} &nbsp; &nbsp;
        </label>
        <br />
        <br />
        {{data}}
    </form>
</body>
</html>

Assume this example, list of languages 1. English 2.French 3.Japanese 4.Tamil 5.Kannada, From that validate minimum - 2 and maximum - 4. — ipln
– ipln, Commented May 11, 2015 at 11:28
So what you really wan to do is allow selecting only specific languages. So for that you need to implement custom validator. Reason for this is that your value in ng-model is the object not index in the list and if you check this link - docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D you'll see there is no predefined validators for this field. Also in my opinion you should just hide invalid positions instead of allowing user to selct it only to display him validation error — Krzysiek
– Krzysiek, Commented May 11, 2015 at 11:43

hurricane · Accepted Answer · 2015-05-11 11:41:31Z

2

Yes there are;

<input
  ng-model="string"
  [name="string"]
  [required="string"]
  [ng-required="boolean"]
  [ng-minlength="number"]
  [ng-maxlength="number"]
  [ng-pattern="string"]
  [ng-change="string"]
  [ng-trim="boolean"]>
...
</input>

And you can check inputs like;

<tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br/>
<tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br/>

You an check at HERE.

For checkboxes Add these and improve for your requests it's a road for you;

<input ng-disabled="(count>max) && (!d.check)" type="checkbox" ng-checked="d.check" ng-model="d.value" minlength="2" maxlength="4" ng.click="countCheck(d)"/>

Js:

$scope.count = 0;
$scope.max = 3;
//You can swap it with ".watch"
yourController.countCheck = function(d){
    if(d.check){
        $scope.count++;
    }else{
        $scope.count--;
    }
}

edited May 11, 2015 at 11:41

answered May 11, 2015 at 11:15

hurricane

6,7342 gold badges38 silver badges45 bronze badges

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

6 Comments

ipln Over a year ago

This ng-minlength and ng-maxlength support textbox only not an checkbox group.

ipln Over a year ago

Please refer the link 'stackoverflow.com/questions/29959577/…'

hurricane Over a year ago

For checkboxes you can't do that. You have to create a ".watch" for these checkboxes and you can count them. If count across limit you can ng-disable other checkboxes.

ipln Over a year ago

I tired a lot, ctrl.$setValidity('minmax', ((min <= count) && (max >= count))); once the constraint change minmax value doesnot update.

ipln Over a year ago

I tired with your code, 1) I need to check both min and max. 2) Once max reached disable the checkbox then how can enable the checbox. 3) I need this validation result affect in form validation

|

Collectives™ on Stack Overflow

Angularjs checkbox group min and max validation restriction

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related