Select 至少一个复选框验证

Question

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

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

<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>

Answer 1

您可以使用本机 javascript 函数迭代数组。首先想到的是 Array.prototype.some() and 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。

Answer 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>

Select 至少一个复选框验证

Select at least one checkbox validation

node.js

angularjs

mean-stack

mean.io