0
出発日/到着日の2つのフィールドがあります。日付範囲AngularJS書式確認
両方ともディレクティブを使用して検証しています。
(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>
「出発」の日付範囲は、いくつかのマイナーな違いと同じである。ここ
は、ディレクティブは「到着」日付範囲のように見えるものです。 （同じコードで画面を埋める必要はありません）
これは、以下のユースケース（S）以外で動作します：
ステップ1.設定出発日：2017年12月28日
ステップ2.到着日の設定：12/27/2017
===>「到着日は出発日に先行することはできません！」と表示されます。
ステップ3.修正出発日：2017年12月26日
実際：「到着日」というエラーメッセージが消えません。
予想：「到着日」エラーメッセージが表示されなくなりました。
質問：別のディレクティブを使用している別の要素の$有効な状態に影響する1つの要素上のディレクティブを取得するにはどうすればよいですか？
if (valid)ブロックで私のコメントに気付きましたが、私はなぜこれが機能しないのか尋ねていますか？ 1つの指令でモデルコントローラの有効性を設定すると、別の指令から同じモデルコントローラを使用できないのはなぜですか？私はこれが動作していないので大文字と小文字を区別していると仮定します...