Datumsbereich AngularJS Formvalidierung

Question

Ich habe 2 Datumsfelder: Abflug/Ankunft.

Beide haben eine Validierung mit einer Direktive. Hier

ist, was die Richtlinie sieht aus wie für die „Ankunft“ Datumsbereich:

(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 Nutzung:

<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> 

Der „departure“ Datumsbereich ist das gleiche mit einem paar kleinen Unterschieden . (keine Notwendigkeit, den Bildschirm mit dem gleichen Code zu füllen)

Dies funktioniert mit Ausnahme der folgenden Anwendungsfall (e):

Schritt 1. Set Abreisedatum: 12/28/2017

Schritt 2. Datum der Ankunft: 12/27/2017

===> Fehler wird angezeigt "Das Anreisedatum kann nicht vor dem Abreisedatum liegen!"

Schritt 3. Ändern Abreisedatum: 12/26/2017

Aktuell: „Ankunftsdatum“ Fehlermeldung nicht weggeht.

Erwartet: Fehlermeldung "Arrival Date" wird gelöscht.

Frage: Wie bekomme ich eine Direktive, die auf einem Element ist, um den gültigen $ Status eines anderen Elements zu beeinflussen, das eine andere Direktive verwendet?

Bitte beachten Sie meinen Kommentar in der if (valid) Block, wo ich frage, warum funktioniert das nicht? Wenn ich die Gültigkeit des Modell-Controllers in einer Richtlinie festlege - warum kann ich nicht den gleichen Modell-Controller aus einer anderen Richtlinie bekommen? Ich nehme an, dass dies der Fall ist, weil das nicht funktioniert ...

Answer 1

Ich endete mit dem Hinzufügen von ein paar Controller-Funktionen, die abhängig von dem Datumsfeld, das mit ng-change geändert wurde, aufgerufen werden würde. Zuerst musste ich das Formular meinem Controller zur Verfügung stellen. Daher werden Sie feststellen, dass sich mein Formularname geändert hat. Sobald ich von meinem Controller auf das Formular zugreifen konnte, war es einfach, die Gültigkeit des Elements zu ändern.

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