Выберите по крайней мере один флажок проверку

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().

С некоторые, вы можете определить, является ли один элемент в массиве проверяет верно и с фильтром вы можете найти все элементы, которые проходят пользовательское выражение и проверить, если вновь созданный массив имеет определенную длину.

т.д .:

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>