选择至少一个复选框验证答案

【问题标题】：Select at least one checkbox validation选择至少一个复选框验证
【发布时间】：2015-11-06 07:02:09
【问题描述】：

我有一组复选框，我想从中选择至少一个复选框并希望显示验证错误

我该怎么做？这是我的代码

<div class="form-group" ng-class="{ 'has-error' : submitted && form.field.$invalid }">
    <div class="col-md-12"><label for="field" >Select at leat one</label></div>
        <div class="col-md-2" data-ng-repeat="i in [1,2,3,4]">
          <label><input type="checkbox" name="field[$index]" value="{{i}}" data-ng-model="form.field[$index]" required/>Choice {{i+1}}</label>
        </div>
        <div ng-show="submitted && form.field.$invalid" class="help-block">
          <p ng-show="form.field.$error.required">Please select at least one choice<p>
        </div>
    </div>
</div>

【问题讨论】：

我不太确定您的要求，所以我稍微检查了一下，并使用了过滤器和一些功能来验证至少一个选中的复选框。 Plunker
谢谢@skubski 请附上一些描述作为答案，以便我接受你的答案。
已添加，谢谢。 @Dau

标签： angularjs node.js mean-stack mean.io

【解决方案1】：

您可以使用原生 javascript 函数来迭代您的数组。首先想到的是Array.prototype.some() 和Array.prototype.filter()。

使用 some，您可以确定数组中的一项是否验证为真，使用 filter 您可以找到所有通过自定义表达式的元素并检查新的创建的数组有一定的长度。

例如：

var atleastOne = this.form.field.some(function(element) {
    return element;
 });

 if(atleastOne) {
   window.alert("validated with some");
 } 

 var filtered = this.form.field.filter(function(element) {
    if(element) { return element; }
 });

 if(filtered.length > 0) {
    window.alert('validated with filter');
 }

您可以根据验证结果标记显示错误的变量。可以在here 找到工作演示。

【讨论】：

【解决方案2】：

您可以正确创建复选框列表对象数组，然后绑定它。请找demo

<div ng-controller="ChckbxsCtrl">
<div ng-repeat="chk in items">
    <div style="width:500px;height:100px;border:1px solid #000;">
         <B>{{chk.group}}</B><br>
    <label ng-repeat="vale in chk.values">
    <input type="checkbox" ng-model="vale.val" />
    {{vale.label}}</label>
         </div>
     <span ng-show="chk.isValid">Select at least one option from {{chk.group}}</span>
        </br> </div>
</br>

【讨论】：