我有一些带有angularjs有效/无效状态的表格。
<div class="form-group" ng-class="{ 'has-error' : createForm.name.$invalid && !createForm.name.$pristine , 'has-success': createForm.name.$valid}">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="$parent.filterName" ng-minlength="1" required/>
<span ng-show="createForm.name.$invalid && !createForm.name.$pristine">Name shouldn't be empty</span>
<span ng-show="isDublicateColumn($parent.filterName)">Name already exists</span>
</div>
如何根据isDublicateColumn($parent.filterName)
?
或者,当'has-error'
返回true时,是否有更好的方法可以将引导状态更改为isDublicateColumn($parent.filterName)
?
答案 0 :(得分:1)
应该做的工作
<div class="form-group" ng-class="{
'has-error' : (isDublicateColumn($parent.filterName) || createForm.name.$invalid && !createForm.name.$pristine) ,
'has-success': createForm.name.$valid}">
答案 1 :(得分:0)
如果您使用<form>
而不是<div>
,则另一种解决方案是创建自定义验证指令。
app.directive('noDuplicateColumn', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, modelCtrl) {
modelCtrl.$parsers.unshift(function(viewValue) {
var isValid = !scope.isDublicateColumn(viewValue);
modelCtrl.$setValidity('duplicateColumn', isValid);
return isValid ? viewValue : undefined;
});
}
};
});
并将其放在您的输入上:
<input type="text" name="name" class="form-control" ng-model="filterName" ng-minlength="1" required no-duplicate-column />
有关完整示例,请参阅:http://plnkr.co/edit/O7MZX8lAk6lUjHnkgnVG?p=preview