2013-07-01 11 views
7

Mam niestandardową dyrektywę sprawdzania poprawności, której używam, aby zapewnić, że dwie daty znajdują się w ważnym zakresie. Dyrektywa działa poprawnie, gdy użytkownik zmienia wartości, jednak nie uruchamia się po załadowaniu w nowym modelu lineItem za pośrednictwem AJAX.Wyzwalanie niestandardowego sprawdzania poprawności formularza AngularJS w przypadku zmiany modelu

Problem polega na tym, że użytkownik może wprowadzić nieprawidłowe daty w formularzu i wywołać błąd, a następnie załadować kolejny element lineItem. W tym momencie na formularzu pojawia się komunikat o błędzie, mimo że dane w formularzu są prawidłowe.

Jeśli spróbuję tego samego z wbudowanym sprawdzianem Angular (takim jak required), walidacja wyzwala i znika odpowiednio. Co muszę zrobić, aby mój sposób sprawdzania poprawności był taki sam jak w przypadku Angular?

(uwaga: Używam novalidate na atrybucie formularz i Kątowymi v1.1.5)

DYREKTYWĄ

ngApp.directive("validateBefore", function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attrs, ctrl) { 
      ctrl.$parsers.unshift(function(value) { 
       var before = scope.$eval(attrs.validateBefore); 
       if(value <= before || !before) { 
        ctrl.$setValidity("validateBefore", true); 
        return value; 
       } else { 
        ctrl.$setValidity("validateBefore", false); 
        return undefined; 
       } 
      }); 
     } 
    } 
}); 

WZÓR

<div class="date-group"> 
    <span class="date"> 
     <input type="text" class="input-medium" name="starts-at" ng-model="lineItem.startsAt" placeholder="From..." validate-before="lineItem.endsAt"> 
    </span> 

    <span class="date"> 
     <input type="text" class="input-medium" name="ends-at" ng-model="lineItem.endsAt" placeholder="To..." validate-after="lineItem.startsAt"> 
    </span>  
</div> 

STEROWNIKA

var lineItem = LineItem.get({ id: lineItemId }, function() { 
    $scope.lineItem = lineItem; 

    if($scope.lineItemForm) { 
     $scope.lineItemForm.$setPristine(); 
    } 
} 

Odpowiedz

10

Ah-hah, uwzględniłem tylko połowę równania. Ogień $parsers, gdy wejście jest wysyłane z DOM do modelu. Potrzebowałem dodać $formatters, która wysyła dane z modelu do DOM.

Po $ parserami, dodałem następujące:

ctrl.$formatters.unshift(function(value) { 
    var before = scope.$eval(attrs.validateBefore); 
    ctrl.$setValidity("validateBefore", before ? value <= before : true); 
    return value; 
}); 

Powoduje walidację na ogień moment model ulegnie zmianie. Tutaj jest więcej informacji: http://docs.angularjs.org/guide/forms, a tutaj http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController#$formatters

+0

to działa? to nie wyzwala dla mnie walidacji. – ovi

+0

to działa! @ovi, pole formularza jest dołączone do klasy css "ng-invalid", ale nie "ng-dirty", spójrz na to. –

Powiązane problemy