自定義驗證 - 「空白」指令

Question

我正在創建一個與required幾乎相反的驗證指令。我想確保在用戶可以保存之前清除textarea。

我能夠設置窗體的$invalid標誌。我也想在控件上設置$invalid標誌。

他是我到目前爲止有：

application.directive('blank', function() { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function (scope, elem, attrs, ctrl) { 
      var value = elem.val(); 
      var isBlank = !value || !value.trim(); 
      ctrl.$setValidity('blank', isBlank); 
      return undefined; 
     } 
    }; 
}); 

我如何可以設置控制的有效性，所以我可以用它來驗證，如：

$scope.hasBlankError = function (control) { 
    return $scope.isSubmitted && control.$error.blank; 
}; 

Answer 1

由於您的指令是完全相反required那麼最簡單的就是取required指令的來源和反邏輯：

PLUNKER

app.directive('blank', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, elm, attr, ctrl) { 

     var validator = function(value) { 
     if (ctrl.$isEmpty(value)) { 
      ctrl.$setValidity('blank', true); 
      return value; 
     } else { 
      ctrl.$setValidity('blank', false); 
      return; 
     } 
     }; 

     ctrl.$formatters.push(validator); 
     ctrl.$parsers.unshift(validator); 

     attr.$observe('blank', function() { 
     validator(ctrl.$viewValue); 
     }); 
    } 
    }; 
}); 

Password: <input type="text" ng-model="user.password" blank name="password" /> 
<span ng-show="form.password.$error.blank && form.password.$dirty">Password must be blank</span>