AngularJS验证复选框阵列 [英] AngularJS validate checkbox array
问题描述
这可能是重复的，但不能得到任何有用的答案谷歌搜索自己...如果重复了，不好意思。去haed并删除这个帖子。
This might be a duplicate but couldn't get any useful answer googling myself... if duplicated, sorry. Go haed and delete this post.
我在AngularJS以下形式：
I have the following form in AngularJS:
<form novalidate
class="form-group css-form"
name="submissionForm"
ng-submit="submit(submissionForm.$valid)">
<form-portion content="data.piece1"></form-portion>
<form-portion content="data.piece2"></form-portion>
<form-portion content="data.piece3"></form-portion>
<form-portion content="data.piece4"></form-portion>
<form-portion content="data.piece5"></form-portion>
<form-portion content="data.piece6"></form-portion>
<form-portion content="data.piece7"></form-portion>
<form-portion content="data.piece8"></form-portion>
<form-portion content="data.piece9"></form-portion>
<div class="row text-center">
<button type="submit" class="btn btn-success" ng-disabled="submissionForm.$invalid">Submit</button>
<button type="reset" class="btn btn-warning" ng-click="reset()">Reset</button>
</div>
</form>
的formPortion指令被定义为如下：
The formPortion directive is defined as follow:
directives.directive('formPortion', function () {
return {
restrict: 'AE',
require: '^form',
templateUrl: 'partials/form_template.html',
scope: {
content: '='
},
link: function ($scope) {
$scope.submissionForm = $scope.$parent.submissionForm;
$scope.someSelected = function (in_dict) {
for (var k in in_dict) {
if (in_dict[k]) {
return true
}
}
return false
};
}
}
});
该form_template.html如下：
The form_template.html looks like:
<div ng-repeat="(i,row) in content | orderBy : 'order' track by row.field">
<div ng-switch="row.field1">
<-- a bunch of other switches -->
<div ng-switch-when="array">
<div ng-switch="row.field2">
<div ng-switch-when="checkbox" class="row form-group">
<div ng-include="'partials/template1.html'"></div>
</div>
<-- other cases -->
</div>
</div>
</div>
</div>
在template1.html，复选框数组实现的定义是：
In the template1.html, the checkbox array implementation is defined:
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>
{{row.name}}
</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9" ng-init="row.user_input = {}">
<div ng-repeat="value in row.allowed_values" class="checkbox-inline">
<input type="checkbox"
name="{{row.field}}"
value="{{value}}"
ng-model="row.user_input[value]"
ng-required="{{row.mandatory_field && !someSelected(row.user_input)}}"
>{{value}}
</div>
</div>
由于采用了NG-初始化指令，很容易实现的复选框的独立选择。我还是不能做的就是验证。在NG-所需的指令得到（只要一个复选框被点击了NG-要求值的变化）正确触发，但提交按钮不会被激活。这意味着，ngModelController。$无效标志不会被触发。这里是我的形式ngModelController对象的一个片段：
Thanks to the ng-init directive, it is easy to implement the independent selection of the checkboxes. What I still cannot do is the validation. The ng-required directive get triggered correctly (the ng-required value changes as soon as the one checkbox is clicked) but the submit button does not get activated. This means that the ngModelController.$invalid flag does not get triggered. Here is a snippet of the ngModelController object of my form:
...,
"$error": {
"required": [{
"$viewValue": "",
"$validators": {},
"$asyncValidators": {},
"$parsers": [null, null],
"$formatters": [null],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": false,
"$dirty": true,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "A",
"$options": null
}, {
"$viewValue": null,
"$modelValue": null,
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "B",
"$options": null
}, {
"$viewValue": null,
"$modelValue": null,
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "B",
"$options": null
}, {
"$viewValue": null,
"$modelValue": null,
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [null],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "C",
"$options": null
}, {
"$viewValue": false,
"$modelValue": null,
"$validators": {},
"$asyncValidators": {},
"$parsers": [null],
"$formatters": [null],
"$viewChangeListeners": [null],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "D",
"$options": null
}, {
"$viewValue": false,
"$modelValue": null,
"$validators": {},
"$asyncValidators": {},
"$parsers": [null],
"$formatters": [null],
"$viewChangeListeners": [null],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "D",
"$options": null
}, {
"$viewValue": false,
"$modelValue": null,
"$validators": {},
"$asyncValidators": {},
"$parsers": [null],
"$formatters": [null],
"$viewChangeListeners": [null],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "D",
"$options": null
}, {
"$viewValue": false,
"$modelValue": null,
"$validators": {},
"$asyncValidators": {},
"$parsers": [null],
"$formatters": [null],
"$viewChangeListeners": [null],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "D",
"$options": null
}, ...
的 $名称字段被复制为每个复选框/收音机。我如何能实现一些验证，引发一般 $无效标志时，至少有一个复选框被选中？
The $name field gets replicated for each checkbox/radio. How can I implement some validation, triggering the general $invalid flag when at least one checkbox is checked?
推荐答案
After posting another question and surfing the Plunker linked by FelixMelix, I solved my problem. The solution was really stupid. The following line:
NG-所需={{row.mandatory_field＆放大器;＆安培;！someSelected（row.user_input）}}
不得不变成：
NG-所需=row.mandatory_field＆放大器;＆安培;！someSelected（row.user_input）
这篇关于AngularJS验证复选框阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
