如何要求至少 1 个复选框进行 AngularJS 表单验证

How to require at least 1 checkbox for AngularJS Form Validation?

本文关键字:复选框 AngularJS 验证 表单      更新时间:2023-09-26

我有一个以表单显示的JSON对象数组。我希望表单验证工作,其中用户必须选中至少一个复选框才能使整个表单有效。

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

这是我到目前为止的代码:

索引.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>

控制器.js

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

关于我如何能够实现这种行为的任何想法?

您可以添加另一个范围属性并使用 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()">