AngularJS指令，用于检查复选框列表中是否至少选中了一个项目

angularjs directive to check if min. one item in a list of checkboxes is selected

本文关键字：项目 一个 用于 指令 检查 复选框 是否 列表 AngularJS      更新时间：2023-09-26

我正在尝试创建一个指令，该指令应检查复选框项目列表中是否至少选中了一个项目。如果没有，它应该在列表下显示一条错误消息。因此，我创建了此指令：

.directive('validateServices', [function () {
function validate(services) {
  for(var x= 0;x<services.length;x++) {
    if(services[x].selected) return false;
  }
  return true;
}
return {
  restrict: 'A',
  require: 'ngModel',
  link: function (scope, ele, attrs, ngModel) {
    ngModel.$validators.emptyServices = function (modelValue) {
      return validate(modelValue);
    }
  }
}
}]);

和用法：

<ul class="list" validate-services ng-model="pricelist">
  <li class="item title-left"><b>Prestaties</b></li>
  <li ng-repeat="price in pricelist" class="item item-checkbox" ng-click="calculateSum()">
    <label class="checkbox">
      <input type="checkbox" ng-model="price.selected">
    </label>
    {{price.name}}
  </li>
</ul>
<div role="alert">
  <span class="error" ng-if="submitted && pricelist.$error.emptyServices">
      Vul een prestatie
  </span>
</div>

但是，即使值正确，警报也不会显示。这个指令有什么问题？

ngModelController

为了获得ngModelController验证，您需要有一个表单元素或ng-form指令（docs）。 要创建条件错误消息，您需要访问 ngModel 的$error对象，以便判断它何时有效/无效。

<div ng-form="priceForm">
  ...
  <ul class="list" validate-services name="plField" ng-model="pricelist">
  ...

以下是条件的外观： 

<span class="error" ng-if="priceForm.plField.$error.emptyServices">

命令

在指令链接函数中，您需要对ngModel值设置手动$watch，并在 ngModel 更改时调用验证函数： 

scope.$watch('ngModel', function(newValue, oldValue) {
  // this sets your ngModel's validity based on your 
  // validation function 
  ngModel.$setValidity('emptyServices', validate(newValue));
}, true);

您可以在此 plnkr 中看到一个工作示例：http://plnkr.co/edit/B1MPNBR5EC7YARKdvTO2?p=preview

相关文章：