如何要求至少 1 个复选框用于 AngularJS 表单验证？

Question

我有一个以表单形式显示的 JSON 对象数组。我想让表单验证工作，用户必须选择至少一个复选框才能使整个表单有效。

我知道ng-required 可以使用，但是对于我拥有的实现，这意味着必须选择所有这些才能使其有效。

这是我目前的代码：

index.html：

<div ng-repeat="item in volunteerOptions">
    <label class="checkbox"><input type="checkbox" value="" data-ng-model="item.selected" ng-required="true">{{ item.content }}</label>
</div>

<button type="submit" class="btn btn-success" ng-disabled="!memberRegistrationForm.$valid">Submit</button>

controller.js

$scope.volunteerOptions = [
        { content : 'Content 1', selected : false },
        { content : 'Content 2', selected : false },
        { content : 'Content 3', selected : false },
        { content : 'Content 4', selected : false },
];

关于如何实现这种行为的任何想法？

Answer 1

您可以添加另一个范围属性并使用array.some 来检查任何selected 是否为true。然后将该范围属性提供给ng-required。类似的东西

$scope.isOptionsRequired = function(){
  return !$scope.volunteerOptions.some(function(options){
    return options.selected;
  });
}

<input type="checkbox" value="" data-ng-model="item.selected" ng-required="isOptionsRequired()">