如何在可重用的自定义指令中设置输入字段验证？答案

【问题标题】：How to set input field validation in reusable custom directive?如何在可重用的自定义指令中设置输入字段验证？
【发布时间】：2017-05-29 21:21:06
【问题描述】：

我正在尝试制作一个可重用的自定义指令，以验证输入字段中的日期。下面提供的代码可以正常工作，但是根本不能重用，这是我最担心的。我试图做的是在指令中设置一个新的范围但是我得到了一个错误：

多个指令请求隔离范围。

所以我猜孤立作用域对我没有帮助。

还有其他解决方案吗？

这是我的第一个模板：

<form ng-submit="add()" name="addTask" class="form-horizontal">
  <input name="dateInput" is-date-valid type="text" class="form-control" ng-model="task.DueDate" datepicker-options="datepicker.options" ng-model-options="{ timezone: 'UTC' }" uib-datepicker-popup="mediumDate" is-open="isOpened" required>
</form>

这是我的第二个模板：

<form ng-submit="edit()" name="editTask" class="form-horizontal">
  <input name="dateInput" is-date-valid type="text" class="form-control" ng-model="task.DueDate" datepicker-options="datepicker.options" ng-model-options="{ timezone: 'UTC' }" uib-datepicker-popup="mediumDate" is-open="isOpened" required>
</form>

这是我的自定义指令：

function isDateValid($log) {
  'ngInject';
  var directive = {
    restrict: 'A',
    require: 'ngModel',
    link: link
  };
  return directive;

  function link(scope, element, attrs, ctrl) {

    scope.$watch(attrs.ngModel, function () {
      var validation = can_i_get_this_from_controller ?

        if (validation) {
          ctrl.$setValidity('validation', true);
        } else {
          ctrl.$setValidity('validation', false);
        }
    });
  }
}

module.exports = isDateValid;

【问题讨论】：

您可以尝试在您的情况下使用ctrl.$setValidity('validation', value);。
@StanislavKvitash：谢谢，这部分现在可以工作了。可以帮助我验证变量吗？如何从 ngModel 控制器获取它？我想收到true 或false。
我认为，您不应该从控制器中获取它，而是将此验证逻辑放在指令中。顺便说一句，尽量避免使用 $watch，这不是用于验证的好习惯 - 看看 @madhur 的答案，他的方法更好。

标签： angularjs angularjs-directive angular-ui-datepicker

【解决方案1】：

你实现自定义验证器的方式不好，你应该这样做 -

.directive('dateValidate', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
           ngModel.$validators.dateValidate = function(modelValue) {  
               //Your logic here, return true if success else false
           }
        }
    };
 });

它可以在两个表单路径上使用，所以这里不需要那个逻辑。要了解更多关于这些的信息，这是一个很好的resource

【讨论】：