angularjs checkbox group minimum and maximum selection validation

问题

I need to validate minimum and maximum selection on checkbox group. am created the custom directives to validate this.

In custom directive, while based on minimum and maximum selection logic to set ctrl.$setValidity, but ctrl.$setValidity doesn't get refresh or not working.

Is there any directive to validate checkbox group(Min and Max)

View Code:

<html ng-app="myApp">
<head>
<title>AngularJS Routing</title>
<script>
    document.write('<base href="' + document.location + '" />');
</script>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="http://code.angularjs.org/1.2.7/angular.js"></script>
<script src="http://code.angularjs.org/1.2.7/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<form name="form">
    <label ng-repeat="e in ccdata">
        <input class="icheck"
            name="test"
            type="checkbox"
            ng-model="e.value"
            minlength="2"
            maxlength="4"
            data="{{ccdata}}"
            evennumber />
        &nbsp;{{e["name"]}} &nbsp; &nbsp;
    </label>
    {{form.test.$error.minmax}}
</form>
</body>
</html>

Controller code:

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

app.controller('MainCtrl', function ($scope) {
$scope.ccdata = [{ "name": "1", "value": false },
                 { "name": "2", "value": false },
                 { "name": "3", "value": false },
                 { "name": "4", "value": false },
                 { "name": "5", "value": false },
                 { "name": "6", "value": false }];

   console.log($scope.ccdata);

 });

 app.directive('evennumber', [function () {

  var link = function ($scope, $element, $attrs, ctrl) {
      var validate = function (viewValue) {
          var obj = $attrs.data;
          var count = (fnGetCHLDataSource(JSON.parse($attrs.data))).length;
          var min = $attrs.minlength;
          var max = $attrs.maxlength;
          console.log(min + "--" + max + "--" + count);
          if ((min != '' && min > 0) && (max != '' && max > 0)) {
              console.log((min <= count) && (max >= count));
              ctrl.$setValidity('minmax', ((min <= count) && (max >= count));
          }
          return viewValue;
      };

      ctrl.$parsers.unshift(validate);

      $attrs.$observe('evennumber', function (comparisonModel) {
          return validate(ctrl.$viewValue);
      });

      $scope.$watch($attrs['ngModel'], function (newValue) {
          validate(ctrl.$viewValue);
      })

  };

  return {
      require: 'ngModel',
      link: link
  };

  }
  ]);

  function fnGetCHLDataSource(data) {
      for (var i = 0; i < data.length; i++) {
          delete data[i]["$$hashKey"];
      }
  var resultArr = [];
  var i = 0;
  $.each(data, function (key, value) {
    var availFlag;
    for (var val in value) {
        if (i % 2 == 0) {
            availFlag = value[val];
        }
        if (i % 2 == 1 && (value[val] == true)) {
            resultArr.push(availFlag);
        }
        i++;
     }
 })
  return resultArr;
}

回答1:

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--;
    }
}

来源：https://stackoverflow.com/questions/29959577/angularjs-checkbox-group-minimum-and-maximum-selection-validation

标签

angularjs

validation

checkboxlist