Question

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

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

<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()和Array.prototype.filter()。

使用某些，您可以确定数组中的一个项是否验证为true，使用过滤器，您可以找到传递自定义表达式的所有元素并检查是否新的创建的数组有一定的长度。

E.g：

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>

选择至少一个复选框验证

2 个答案: