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