日期范围AngularJS形式验证

Question

我有2个日期字段：decresture/rarrival。

都使用指令对它们进行验证。

这是"到达"日期范围的指令的样子：

(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.设置出发日期：12/28/2017

步骤2.设置到达日期：12/27/2017

===>显示错误"到达日期无法在出发日期之前！"

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

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

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

问题：如何在一个元素上获得一个指令，以影响使用另一个指令的另一个元素的有效状态？

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

Answer 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" />