Javascript 如何为输入设置监视程序。AngularJS中带有指令的$error对象

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

我的指示： 该指令的问题在于，scope.$watch仅在日期的错误对象发生更改时触发，并且每个输入的

scope.input

与更改日期输入的

ctrl

类似

---

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

<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>

此处显示我的错误消息

更新指令以查看输入是否无效

 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}}”

---

下面是深入检查指令行为后的

。我发现最后一个元素的

作用域.input

会影响所有其他作用域
因此，我将$watch设置为侦听

ctrl.$error

，它解决了这个问题

该指令：

---

因为我想使用工具提示来显示错误，我想为$error设置观察者，因为我想动态更改错误消息，例如，当日期错误从必需更改为实际错误时，对象存储必需和最小键。当发生最小错误时，$error将更改为myForm.input。$error={“min”：true}。因此，您需要像以前一样监视$error。但ng min仅在输入类型为数字时应用。因此，在日期类型中，它不起作用返回表单[inputName]。$error soukd在您的情况下起作用如果tyoe是numbers，则ngMin可以是字符串，也可以是输入[date]中的日期。它起作用了，但非常混乱，因为这样我需要为我将添加到表单中的每个验证设置一个监视程序。是的，现在您可以控制ctrl.$error对象。

 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);
      })
    }
  }

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);
    }
  }
}]);