7

2 つの日付が有効な範囲内にあることを確認するために使用するカスタム検証ディレクティブがあります。lineItemユーザーが値を変更するとディレクティブは正常に機能しますが、 AJAX を介して新しいモデルをロードするとトリガーされません。

問題は、ユーザーがフォームに無効な日付を入力してエラーを引き起こし、別の lineItem をロードできることです。この時点で、フォームのデータが有効であっても、フォームにエラー メッセージが表示されます。

Angular のビルトイン検証 ( などrequired) で同じことを試みると、検証がトリガーされ、適切に消えます。では、Angular と同じ方法で検証をトリガーするにはどうすればよいでしょうか?

(注: novalidateform 属性と Angular v1.1.5 を使用しています)

指令

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;
                }
            });
        }
    }
});

テンプレート

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

コントローラ

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

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

1 に答える 1

10

ははは、私は方程式の半分しか占めていませんでした。$parsersDOM からモデルに入力が送信されたときに発火します。$formattersモデルから DOM にデータを送信するを追加する必要がありました。

$parsers の後に、以下を追加しました。

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

これにより、モデルが変更された瞬間に検証が開始されます。ここでさらに議論されています: http://docs.angularjs.org/guide/formsとここhttp://docs.angularjs.org/api/ng.directive:ngModel.NgModelController#$formatters

于 2013-07-01T16:09:13.410 に答える