Question

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

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

===＆GT;错误显示“到达日期不能在出发日期之前！”

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

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

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

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

请注意我在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" />

日期范围AngularJS表单验证

1 个答案: