日期范围AngularJS表单验证

时间:2017-12-28 16:53:53

标签: angularjs forms validation date

我有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)区块中的评论,我在询问为什么这不起作用?如果我在一个指令中设置模型控制器的有效性 - 为什么我不能从另一个指令获得相同的模型控制器?我认为这是因为这不起作用......

1 个答案:

答案 0 :(得分:0)

我最后添加了几个可以调用的控制器函数,具体取决于使用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" />