日期范围 AngularJS 表单验证答案

【问题标题】：Date Range AngularJS Form validation日期范围 AngularJS 表单验证
【发布时间】：2017-12-28 16:53:53
【问题描述】：

我有 2 个日期字段：出发/到达。

两者都使用指令对其进行验证。

以下是“到达”日期范围的指令：

(function(angular) {
'use strict';

function dateRangeToValidatorDirective () {
  return {
    restrict: 'A',
    require : 'ngModel',
    link : function (scope, element, attrs, ngModelCtrl) {
        function validateToDateRange (value) {
            var valid = true;
            if (scope.$eval(attrs.dateRangeValue) && value) {
                var arrivalDate   = Date.parse(value);
                var departureDate = Date.parse(scope.$eval(attrs.dateRangeValue));
                valid = arrivalDate >= departureDate;
                if (valid) {
                    ngModelCtrl.$setValidity('toDateRange', true);
                    ngModelCtrl.$setValidity('fromDateRange', true);  // Why doesn't this work?
                }
                else {
                    ngModelCtrl.$setValidity('toDateRange', false);
                }                   
            }
            return value;
        }
        ngModelCtrl.$parsers.push(validateToDateRange);
    }
  }
}

angular
    .module('components.shared')
    .directive('dateRangeToValidator', dateRangeToValidatorDirective)

})(window.angular);

HTML 用法：

<input type="text" name="arrivalDate" maxlength="10" required 
                         date-picker date-range-to-validator 
                         date-range-value="$ctrl.newFlight.departureDate"
                         placeholder='MM/DD/YYYY' 
                         ng-model="$ctrl.newFlight.arrivalDate" 
                         id="nf_arrivalDate" size="10" />

<div class="input-error" 
     ng-show="$ctrl.newFlight.departureDate.length &&                                                          
              $ctrl.newFlight.arrivalDate.length &&                                                        
              newFlight.arrivalDate.$dirty &&                                                            
              newFlight.arrivalDate.$invalid">
    Arrival Date cannot precede Departure Date!
</div>

“出发”日期范围相同，但有一些细微差别。（无需用相同的代码填满屏幕）

除以下用例外，此方法有效：

步骤 1. 设置出发日期：2017 年 12 月 28 日

第 2 步。设置到达日期：2017 年 12 月 27 日

===> 错误显示“到达日期不能早于出发日期！”

Step 3. 修改出发日期：12/26/2017

实际：“到达日期”错误消息不会消失。

预期：“到达日期”错误消息消失。

问题：如何让一个元素上的一个指令影响另一个正在使用另一个指令的元素的 $valid 状态？

请注意我在if (valid) 块中的评论，我问为什么这不起作用？如果我在一个指令中设置模型控制器的有效性 - 为什么我不能从另一个指令中获得相同的模型控制器？我认为是这种情况，因为那不起作用...

【问题讨论】：

标签： angularjs forms validation date

【解决方案1】：

我最终添加了几个控制器函数，这些函数将根据使用ng-change 更改的日期字段来调用。首先，我需要将表单暴露给我的控制器；因此您会注意到我的表单名称已更改。一旦我可以从控制器访问表单，更改元素的有效性就很容易了。

function checkDepartureDate() {
    if (ctrl.newFlightForm.arrivalDate.$valid && 
        ctrl.newFlight.departureDate.length &&
        ctrl.newFlightForm.departureDate.$invalid) {
        ctrl.newFlightForm.departureDate.$setValidity("fromDateRange", true);
        }
    }
}

<input type="text"  name="arrivalDate" maxlength="10" required 
                          date-picker date-range-to-validator 
                          date-range-value="$ctrl.newFlight.departureDate"
                          placeholder='MM/DD/YYYY' 
                          ng-model="$ctrl.newFlight.arrivalDate"
                          ng-change="$ctrl.checkDepartureDate()" 
                          id="nf_arrivalDate" size="10" />

【讨论】：