AngularJS 组复选框验证 - IT屋-程序员软件开发技术分享社区
AngularJS 组复选框验证
[英] AngularJS group check box validation
本文介绍了AngularJS 组复选框验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个复选框列表，其中至少有一个是强制性的.我试图通过 AngularJS 验证来实现这一点，但很难.下面是我的代码:
//js 代码在这里var app = angular.module('App', []);功能Ctrl($范围){$scope.formData = {};$scope.formData.selectedGender = '';$scope.gender = [{'name': '男','id':1}, {'name': '女',身份证":2}];$scope.formData.selectedFruits = {};$scope.fruits = [{'name': '苹果','id':1}, {'name': '橙色',身份证":2}, {'name': '香蕉',身份证":3}, {'name': '芒果',身份证":4}, ];$scope.submitForm = function() {}}
//html 代码放在这里<!doctype html><html ng-app="应用程序"><头><!-- css文件--><!--应用文件--><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script><!-- 外部文件--><身体><div ng-controller="Ctrl"><form class="Scroller-Container"><div ng-app><form class="Scroller-Container" ng-submit="submit()" ng-controller="Ctrl"><div>你要什么?<div ng-repeat="(key, val) 在水果中"><input type="checkbox" ng-model="formData.selectedFruits[val.id]" name="group[]" id="group[{{val.id}}]" required/>{{val.姓名}} <br/><div ng-repeat="(key, val) 在性别中"><input type="radio" ng-model="$parent.formData.selectedGender" name="formData.selectedGender" id="{{val.id}}" value="{{val.id}}" 需要/>{{val.name}}
<br/>
<pre>{{formData.selectedFruits}}</pre><input type="submit" id="submit" value="Submit"/></表单>
<br></表单>
</html>这是 plunker 中的代码:http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview 有没有人在 AngularJS 上做过这个?使复选框成为必需，迫使我选择所有复选框值.这个问题也没有记录在 AngularJS 文档中.
解决方案
如果您想要求选择组中的至少一项，可以使用 ng 定义动态 required 属性-必需 .
对于性别单选按钮，这很容易:
<输入类型=收音机"ng-model="formData.selectedGender"value="{{val.id}}"ng-required="!formData.selectedGender">复选框组也很容易，如果您使用数组来存储选定的水果(只需检查数组长度)，但是对于对象，则需要检查是否有任何值通过控制器中的过滤器或函数设置为 true:
$scope.someSelected = 函数(对象){返回 Object.keys(object).some(function (key) {返回对象[键]；});}
<输入类型=复选框"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.
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>
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.
解决方案
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"
>
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)"
>
Update:
const someSelected = (object = {}) => Object.keys(object).some(key => object[key])
Also keep in mind that it will return false if value is 0.
这篇关于AngularJS 组复选框验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
