我有一个复选框列表，其中至少有一个是强制性的。我试图通过 AngularJS 验证来实现这一点，但遇到了困难。下面是我的代码:
// Code goes here for js
var app = angular.module('App', []);
function Ctrl($scope) {
$scope.formData = {};
$scope.formData.selectedGender = '';
$scope.gender = [{
'name': 'Male',
'id': 1
}, {
'name': 'Female',
'id': 2
}];
$scope.formData.selectedFruits = {};
$scope.fruits = [{
'name': 'Apple',
'id': 1
}, {
'name': 'Orange',
'id': 2
}, {
'name': 'Banana',
'id': 3
}, {
'name': 'Mango',
'id': 4
}, ];
$scope.submitForm = function() {
}
}
// Code goes here for html
<!doctype html>
<html ng-app="App">
<head>
<!-- css file -->
<!--App file -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<!-- External file -->
</head>
<body>
<div ng-controller="Ctrl">
<form class="Scroller-Container">
<div ng-app>
<form class="Scroller-Container" ng-submit="submit()" ng-controller="Ctrl">
<div>
What would you like?
<div ng-repeat="(key, val) in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[val.id]" name="group[]" id="group[{{val.id}}]" required />{{val.name}}
</div>
<br />
<div ng-repeat="(key, val) in gender">
<input type="radio" ng-model="$parent.formData.selectedGender" name="formData.selectedGender" id="{{val.id}}" value="{{val.id}}" required />{{val.name}}
</div>
<br />
</div>
<pre>{{formData.selectedFruits}}</pre>
<input type="submit" id="submit" value="Submit" />
</form>
</div>
<br>
</form>
</div>
</body>
</html>
这是 plunker 中的代码:http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview有没有人在 AngularJS 上做过这个？使复选框成为必需，迫使我选择所有复选框值。这个问题也没有记录在 AngularJS 文档中。
最佳答案
如果您希望至少选择组中的一项，可以使用 ng-required 定义动态 required 属性。
对于性别单选按钮，这很容易:
<input
type="radio"
ng-model="formData.selectedGender"
value="{{val.id}}"
ng-required="!formData.selectedGender"
>
复选框组也很容易，如果你使用数组来存储选定的水果(只需检查数组长度)，但是对于对象，有必要检查是否有任何值设置为 true 过滤器或 Controller 中的函数:
$scope.someSelected = function (object) {
return Object.keys(object).some(function (key) {
return object[key];
});
}
<input
type="checkbox"
value="{{val.id}}"
ng-model="formData.selectedFruits[val.id]"
ng-required="!someSelected(formData.selectedFruits)"
>
更新:
const someSelected = (object = {}) => Object.keys(object).some(key => object[key])
另请记住，如果值为 0，它将返回 false。
关于javascript - AngularJS 组复选框验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19632933/