AngularJS 组复选框验证
Posted
技术标签:
【中文标题】AngularJS 组复选框验证【英文标题】：AngularJS group check box validation 【发布时间】：2013-11-07 02:46:06 【问题描述】：我有一个复选框列表，其中至少有一个是必填项。我试图通过 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 文档中。
【问题讨论】：
【参考方案1】：好吧，聚会可能很晚了，但是如果您正在查看一组对象，那么仅检查所选对象数组长度的解决方案对我有用。 HTML
<div ng-repeat="vehicle in vehicles">
<input type="checkbox" name="car" ng-model="car.ids[vehicle._id]" ng-required=" car.objects.length <= 0"> vehicle.model vehicle.brand <b>vehicle.geofenceName</b>
</div>
JS
$scope.vehicles = [,] // Your array of objects;
$scope.car =
ids: ,
objects: []
;
$scope.$watch(function()
return $scope.car.ids;
, function(value)
$scope.car.objects = [];
angular.forEach($scope.car.ids, function(value, key)
value && $scope.car.objects.push(getCategoryById(key));
);
, true);
function getCategoryById(id)
for (var i = 0; i < $scope.vehicles.length; i++)
if ($scope.vehicles[i]._id == id)
return $scope.vehicles[i];
我了解此解决方案中发生的情况，您正在检查所有复选框选项以了解单击了哪个选项。但据我所知，这是迄今为止最简单的解决方案（理解和实施），如果你知道你的选择会受到限制，它就像一个魅力。 获得更多时间优化的解决方案。检查上面的答案。
【讨论】：
【参考方案2】：我们可以在不遍历所有复选框实例的情况下实现您的要求。 这是示例代码
<script>
angular.module('atLeastOneExample', [])
.controller('ExampleController', ['$scope', function($scope)
$scope.e = function(s)
eval(s);
;
]);
</script>
这里我将 javascript eval 函数包装在 "e" 函数中以访问它。
<form name="myForm" ng-controller="ExampleController" ng-init="c=0">
<label>
Value1: <input type="checkbox" ng-model="checkboxModel.value[0]" ng-change="e('($scope.checkboxModel.value[0])?$scope.c++:$scope.c--')"/>
</label><br/>
<label>
Value2: <input type="checkbox" ng-model="checkboxModel.value[1]" ng-change="e('($scope.checkboxModel.value[1])?$scope.c++:$scope.c--')"/>
</label><br/>
value = checkboxModel.value<br/>
isAtLeastOneChecked = c>0
</form>
【讨论】：
【参考方案3】：感谢 Klaster_1 接受的回答。我通过在复选框输入上使用ng-change 来设置本地范围变量，该变量将用作ng-required 表达式。这可以防止在每个摘要上运行someSelected()。
这是一个证明这一点的 plunkr：http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/
这是后人的 HTML 和 JS。
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="AppCtrl">
<form class="Scroller-Container" name="multipleCheckbox" novalidate="">
<h3>What would you like?</h3>
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[fruit.name]" ng-change="checkboxChanged()" ng-required="!someSelected" /> fruit.name
</div>
<p style="color: red;" ng-show="multipleCheckbox.$error.required">You must choose one fruit</p>
</form>
<pre>Fruits model:
formData.selectedFruits | json</pre>
</div>
</body>
</html>
angular
.module('App', [])
.controller('AppCtrl', function($scope)
var selectedFruits =
Mango: true
;
var calculateSomeSelected = function()
$scope.someSelected = Object.keys(selectedFruits).some(function(key)
return selectedFruits[key];
);
;
$scope.formData =
selectedFruits: selectedFruits
;
$scope.fruits = [
'name': 'Apple'
,
'name': 'Orange'
,
'name': 'Banana'
,
'name': 'Mango'
];
$scope.checkboxChanged = calculateSomeSelected;
calculateSomeSelected();
);
【讨论】：
【参考方案4】：如果您希望选择组中的至少一项，可以使用 ng-required 定义动态 required 属性。
对于性别单选按钮，这很容易：
<input
type="radio"
ng-model="formData.selectedGender"
value="val.id"
ng-required="!formData.selectedGender"
>
如果您使用数组来存储选定的水果（只需检查数组长度），复选框组也很容易，但是对于对象，有必要使用控制器中的过滤器或函数检查是否有任何值设置为 true：
$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。
【讨论】：
您好 Klaster_1。我不认为这是一个好的解决方案。 Wehn 我有一组复选框，它正在检查每个人。它没有经过优化，在 IE8 中，您必须选中所有复选框才需要 = true。我在@Fatih Hayrioglu 示例上添加了一个console.log，以查看单击时添加了多少控制台：sample 在检查密钥之前快速检查以确保object 存在。 $scope.anySelected = function (object) return object && Object.keys(object).some(function (key) return object[key]; );
我怎样才能得到这个返回显示消息，例如：<p ng-show="$scope.someSelected && addUserForm.submitted" class="help-block">Error.</p>
@ArthurMastropietro，someSelected 是一个函数，所以你需要从角度表达式中调用它：$scope.someSelected(yourData)，就像在ng-required 中一样。
@Klaster_1 如果我想加入 Angular 的验证系统怎么办？即如果我想测试form.fruit.$error.required？我用你的解决方案试过了，但它不起作用。谢谢！以上是关于AngularJS 组复选框验证的主要内容，如果未能解决你的问题，请参考以下文章