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();
}
}
to działa? to nie wyzwala dla mnie walidacji. – ovi
to działa! @ovi, pole formularza jest dołączone do klasy css "ng-invalid", ale nie "ng-dirty", spójrz na to. –