Question

只是想知道如何在angular中验证一组复选框，这样当它们都没有被选中时以及它们是$ dirty时，会显示一条错误信息。

我不确定我做错了什么，但是没有为他们设置$脏 - 必须选择最后一个来设置$ dirty。当触摸组中的一个复选框时，我想要设置$ dirty。我已经编写了一个自定义ng-required规则，用于检查是否已选中其中一个复选框。

Plunkr：http://plnkr.co/edit/lDYMXSZcCOjmBSMC7kHQ?p=info

<div class="checkbox checkbox-inline checkbox-icons" ng-repeat="type in serviceTypes" ng-if="newListing.isService" ng-click="print(newListing)">
    <input type="checkbox" id="{{type.icon}}" ng-model="newListing.listingTypes[type.typeId]" name="inputListingType" ng-required="!oneCheckboxSelected(newListing.listingTypes)">
    <label for="{{type.icon}}">
        {{type.name}}
    </label>
</div>
<small class="help-block" ng-messages="addSpaceForm.inputListingType.$error" ng-show="addSpaceForm.inputListingType.$dirty">
    <span ng-message="required">This field is required</span>
</small>

在控制器中：

$scope.oneCheckboxSelected = function(arr) {
    return _.keys(_.pick(arr, _.identity)).length > 0;
};

Answer 1

发生此问题的原因是您尝试检查表单元素的$dirty属性，其中有许多具有相同name的元素。这不起作用，因为角度将无法将属性绑定到许多元素。

考虑使用http://vitalets.github.io/checklist-model/这是一个bower可安装依赖项，用于处理一个指令中的多个复选框。

您应该可以使用checklist-change="imChanged()"的自定义功能来切换验证消息块

验证Angular中的复选框组

1 个答案: