Question

我有一些带有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)？

Answer 1

应该做的工作

<div class="form-group" ng-class="{ 
                   'has-error' : (isDublicateColumn($parent.filterName) || createForm.name.$invalid && !createForm.name.$pristine) ,  
                             'has-success': createForm.name.$valid}">

Answer 2

如果您使用<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

如何设置输入状态angularjs

2 个答案: