我正在尝试创建一个指令,该指令应检查是否至少选中了复选框项目列表中的一个项目。如果不是,它应该在列表下方显示一条错误消息。因此我创建了这个指令:
.directive('validateServices', [function () {
function validate(services) {
for(var x= 0;x<services.length;x++) {
if(services[x].selected) return false;
}
return true;
}
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, ele, attrs, ngModel) {
ngModel.$validators.emptyServices = function (modelValue) {
return validate(modelValue);
}
}
}
}]);
以及用法:
<ul class="list" validate-services ng-model="pricelist">
<li class="item title-left"><b>Prestaties</b></li>
<li ng-repeat="price in pricelist" class="item item-checkbox" ng-click="calculateSum()">
<label class="checkbox">
<input type="checkbox" ng-model="price.selected">
</label>
{{price.name}}
</li>
</ul>
<div role="alert">
<span class="error" ng-if="submitted && pricelist.$error.emptyServices">
Vul een prestatie
</span>
</div>
但是即使值是正确的,警报也永远不会出现。这个指令有什么问题?
最佳答案
ngModelController
为了使用 ngModelController
进行验证,您需要有一个表单元素或 ng-form
指令 ( docs )。要创建条件错误消息,您需要访问 ngModel 的 $error
对象,以便您可以判断它何时有效/无效。
<div ng-form="priceForm">
...
<ul class="list" validate-services name="plField" ng-model="pricelist">
...
这是条件语句的样子:
<span class="error" ng-if="priceForm.plField.$error.emptyServices">
指令
在指令链接函数中,您需要在 ngModel
值上设置手动 $watch
并在 ngModel 更改时调用您的验证函数:
scope.$watch('ngModel', function(newValue, oldValue) {
// this sets your ngModel's validity based on your
// validation function
ngModel.$setValidity('emptyServices', validate(newValue));
}, true);
您可以在这个 plnkr 中看到一个工作示例:http://plnkr.co/edit/B1MPNBR5EC7YARKdvTO2?p=preview
关于javascript - angularjs 指令检查是否最小。复选框列表中的一项被选中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35329293/