AngularJS 自定义指令，用于日期输入的表单验证答案

【问题标题】：AngularJS custom directive for form validation for date inputsAngularJS 自定义指令，用于日期输入的表单验证
【发布时间】：2021-01-08 12:50:31
【问题描述】：

我有一个用 Angular 1.5.3 编写的应用程序。

这是我想做的：

我有一个包含 2 种日期输入类型的用户表单。我需要在我的表单中添加一些自定义验证。当表单上的“到期日期”大于表单上的“生效日期”时，我想向用户显示错误消息。

我相信我可以使用自定义指令和 ng-messages 来做到这一点。

这是我的代码 sn-p：

 <form name="form.mainForm">

      <div>
        <span>Effective Date: </span>
        <input required type="date" name="effectiveDate" ng-model="effectiveDate" />

        <div>
          <span>Expiry Date: </span>
          <input 
            type="date" 
            name="expiryDate" 
            ng-model="expiryDate" 
            date-greater-than="{{ effectiveDate }}" />
        </div>
      </div>
  </form>


app.directive('dateGreaterThan', function () {
      return {
                restrict: 'A',
        require: 'ngModel',
        scope: false,
        link: function (scope, elm, attrs, ctrl) {
            console.log(' here we are ');

            function isValidDateRange(expiryDate, effectiveDate) {

                console.log(expiryDate, effectiveDate);

                if (effectiveDate == null || expiryDate == null ) {
                    return true;
                }

                return effectiveDate > expiryDate;
            }

            function validateDateRange(inputValue) {
                var expiryDate = inputValue;
                var effectiveDate = scope.effectiveDate;
                var isValid = isValidDateRange(expiryDate, effectiveDate);
                console.log("isValid: ", isValid);
                ctrl.$setValidity('dateGreaterThan', isValid);
                return inputValue;
            }

            ctrl.$parsers.unshift(validateDateRange);
            ctrl.$formatters.push(validateDateRange);
            attrs.$observe('dateGreaterThan', function () {
                validateDateRange(ctrl.$viewValue);
            });
      }
      };

我试图在这里解决问题，但我的指令无法正常工作。它似乎没有计算日期的变化，也没有与 ng-messages 集成。

这是我的尝试： http://jsfiddle.net/aubz88/q7n3abre/

【问题讨论】：

标签： javascript angularjs date using-directives

【解决方案1】：

ngMessages 模块应该从 CDN 加载。或者使用包管理器安装。 ngMessages 模块不包含在 AngularJS 中。 https://code.angularjs.org/1.4.14/docs/api/ngMessages

var app = angular.module("hello", ['ngMessages']);

其他几点。使用来自 ngModel 的 $validators。

ctrl.$validators.dateGreaterThan = validateDateRange;

使用范围属性传递另一个日期

 scope: {dateGreaterThan: '='},

我认为还有很多需要改进的地方。我也确实忘记了一些 AngularJS 的东西。 f.e.：您可以在第一个日期更改时再次触发验证。检查https://code.angularjs.org/1.4.14/docs/api/ng/type/ngModel.NgModelController的$validate函数。

你可以检查这个小提琴的基本设置：http://jsfiddle.net/hcjLkuzt/

【讨论】：