Question

我有一个包含日期输入和选择元素的表单，
我尝试使用ngChange，但我发现它在处理日期错误时不是很有用因此，我尝试在每个输入的指令中设置观察者。$ error以向用户显示错误消息。

我的指示：

module.directive('validator', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) {
      scope.input = ctrl;
      scope.$watch('input.$error', function() {
        console.log(scope.input);
      }, true);
    }
  }
}]);

该指令的问题是范围。$ watch仅在日期的错误对象发生变化时触发，并且每个输入的scope.input变得类似于更改日期输入的ctrl

JSFiddle

Answer 1

更新您的指令以观察输入是否无效

 module.directive('validator', [function() {
    return {
    restrict: 'A',
    require: '^form',
    link: function(scope, elem, attr, form) {

      var inputName = attr.name;
      console.log(inputName, form[inputName].$error)
      function watcherForRequired(){
       return form[inputName].$error.required;
      }
      function watcherForMin(){
       return form[inputName].$error.min;
      }
      scope.$watch(watcherForRequired, function(required) {
        console.log("required", required);
      })
      scope.$watch(watcherForMin, function(min) {
        console.log("min error", min);
      })
    }
  }

还将ng-min更新为min="{{loan.loaned}}"

这里是JSFiddle

Answer 2

深入检查指令行为后。我发现最后一个元素的scope.input会感染所有其他元素。
所以我设置$ watch听ctrl.$error，它解决了问题。

指令：

module.directive('validator', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) {
      scope.$watch(function() {return ctrl.$error}, function() {
        if (ctrl.$invalid) {
            console.log(attr.name, 'invalid');
        }
        else {
            console.log(attr.name, 'valid');
        }
      }, true);
    }
  }
}]);

Updated JSFiddle

Answer 3

你这样做是为了显示错误信息吗？为什么不在模板中简单地执行此操作？

<form name="myform">
  <input ng-model="myform.model.user-name" name="user-name" id="my-form-user-name" />
  <div ng-messages="myform.user-name.$error">
    <p ng-if="myform.user-name.$invalid">My Error Message Here</p>
  </div>
</div>

如何设置观察者输入。$ Ang对象与AngularJS中的指令

我的指示：

3 个答案:

指令：