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>

自定义验证 - “空白”指令

1 个答案: