7

我有一个自定义验证指令，用于确保两个日期在有效范围内。lineItem当用户更改值时，该指令可以正常工作，但是当我通过 AJAX加载新模型时它不会触发。

问题是用户可以在表单上输入无效日期并触发错误，然后加载另一个 lineItem。此时，即使表单中的数据有效，表单上也会出现错误消息。

如果我使用 Angular 的内置验证（如required）尝试相同的操作，验证会适当地触发并消失。那么，我需要做些什么才能使我的验证触发方式与 Angular 相同？

（注意：我novalidate在 form 属性和 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

啊哈，我只占了等式的一半。当$parsers输入从 DOM 发送到模型时触发。我需要添加$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 回答