AngularJS组复选框验证 [英] AngularJS group check box validation
问题描述
我的复选框，其中至少有一个是强制性的列表。我曾尝试通过AngularJS验证，以实现这一目标，但有一个困难时期。下面是我的code：
I have a list of check boxes, of which at least one is compulsory. I have tried to achieve this via AngularJS validation, but had a hard time. Below is my code:
// 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的code：<一href=\"http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=$p$pview\">http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=$p$pview有没有人这样做对AngularJS？制作所需的复选框，迫使我选择所有的复选框值。这个问题也没有AngularJS文档中介绍。
Here is the code in plunker: http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview Has anyone done this on AngularJS? Making the checkboxes required, forces me to select all the checkbox values. This problem is also not documented in the AngularJS documentation.
推荐答案
如果你想要求组至少有一个项目被选中，它可以定义动态的要求属性是纳克-required
If you want to require at least one item in group being selected, it's possible to define dynamic required attribute with ng-required.
有关性别单选按钮，这将是很容易：
For gender radio buttons this would be easy:
<input
type="radio"
ng-model="formData.selectedGender"
value="{{val.id}}"
ng-required="!formData.selectedGender"
>
复选框组会是一件容易的事，如果你使用数组存储选择的水果（只检查数组的长度），但与对象有必要检查是否有任何值都设置为true，在控制器的过滤器或功能：
Checkbox group would be easy too, if you used array to store selected fruits (just check array length), but with object it's necessary to check if any of values are set to true with filter or function in 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])
也请记住，这将返回false，如果值是0。
Also keep in mind that it will return false if value is 0.
这篇关于AngularJS组复选框验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
