select至less一个checkboxvalidation
我有我想从中select至less一个checkbox,并希望显示validation错误checkbox的数组
我怎样才能做到这一点? 这是我的代码
<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>
您可以使用原生JavaScript函数遍历数组。 首先想到的是Array.prototype.some()和Array.prototype.filter() 。
有些时候 ,可以确定数组中的一个项目是否validation为真,并且使用筛选器可以find所有传递自定义expression式的元素,并检查新创build的数组是否具有一定的长度。
例如:
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'); }
您可以根据validation结果标记显示错误的variables。 一个工作演示可以在这里find。
你可以创build你的checkbox列表对象数组,然后绑定它。 请find演示
<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>