私は、2つの日付が有効範囲内にあることを確認するために使用するカスタム検証指令を持っています。ユーザーが値を変更したときにディレクティブは正常に動作しますが、AJAXを介して新しいlineItem
モデルにロードするとトリガーは発生しません。モデルの変更時にカスタムAngularJSフォームの検証を有効にします
問題は、ユーザーがフォームに無効な日付を入力してエラーをトリガーし、別のlineItemを読み込む可能性があることです。フォームのデータが有効であっても、この時点でフォームにエラーメッセージが表示されます。
Angularのバリデーション(required
など)で同じことを試してみると、検証がトリガされて消えます。だから、私の検証トリガーをAngularと同じようにするためには、私は何をする必要がありますか?
(注:私は、フォームの属性、および角度v1.1.5デベロッパーにnovalidate
を使用しています)
DIRECTIVE
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;
}
});
}
}
});
TEMPLATE
<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>
CONTROLLER
var lineItem = LineItem.get({ id: lineItemId }, function() {
$scope.lineItem = lineItem;
if($scope.lineItemForm) {
$scope.lineItemForm.$setPristine();
}
}
ですか?それは私の検証を引き起こすものではありません。 – ovi
それは動作します! @ovi、フォームフィールドに "ng-invalid"というCSSクラスが追加されますが、 "ng-dirty"ではありません。 –