Menu
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"]}}
</label>
<br />
<br />
{{data}}
</form>
</body>
</html>
408
asked May 22 '26 16:05
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--;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
