angularjs - Angular 验证 : Rollback ngModel. $modelValue 更新？

Question

我写了一个异步验证器。它调用远程端点并检查我的字段是否唯一。如果远程端点是唯一的，则应该返回 true，否则返回 false。我的验证器:

    module.directive('shouldBeUnique', ['$parse', '$timeout', '$http', '$q', function ($parse, $timeout, $http, $q) {
    return {
        // restrict to an attribute type.
        restrict: 'A',
        require: 'ngModel',
        scope: {
            getEndPoint: '&'
        },
        priority: 1,
        link: function (scope, element, attrs, ngModel) {
            function isUnique(value) {
                $timeout(function() {
                    ngModel.$setValidity('shouldBeUnique', false);
                });

                //Cancels any ongoing http request
                if(scope.canceler) {
                    scope.canceler.resolve();
                }

                if(!value) {
                    return;
                }

                ngModel.validationInProgress = true;
                var canceler = scope.canceler = $q.defer();
                var endpointDetails = scope.getEndPoint();
                var params = {};
                params[endpointDetails.paramName] = value;
                var request = $http({
                    url: endpointDetails.url,
                    method: 'GET',
                    params: params,
                    timeout: canceler.promise
                });

                request.success(function(data) {
                    var valid = false;
                    if(data === 'true') {
                        valid = true;
                    }

                    ngModel.$setValidity('shouldBeUnique', valid);
                    ngModel.validationInProgress = false;
                });

                request.error(function() {
                    ngModel.validationInProgress = false;
                });
            }

            ngModel.$formatters.push(function(value) {
                isUnique(value);
                return value;
            });

            ngModel.$parsers.push(function (value) {
                ngModel.$setValidity('shouldBeUnique', true);
                ngModel.$dirty = true;
                if(ngModel.$valid) {
                    isUnique(value);
                }

                return value;
            });
        }
    };
}]);`

我的验证器工作正常。它的工作方式是它最初会将 setValidity 设置为 true，以便更新 modelValue。然后异步检查实际有效性并相应地调用 ngModel.setValidity。

我在这里面临的唯一问题是 ngModel.$modelValue 在检查有效性之前得到更新，因此它可能包含无效数据。有没有办法回滚对 modelValue 的提交？

我可以找到 $rollbackViewValue 但没有找到模型。或者有什么方法可以将 ngModel.$modelValue 更新推迟到异步调用完成时。

Answer 1

能够解决问题。当异步调用正在进行时，提交一个临时值，例如“VALIDATION_PENDING”，当验证完成时，执行 ngModel.$commitViewValue(true)。我正在传递 true 以再次触发解析器。您的解析器应该处理 ngModel.$modelValue === 'VALIDATION_PENDING' 时的情况。在这种情况下，不要进行异步调用，只需从 Parser 返回 $viewValue。

代码:

module.directive('shouldBeUnique', ['$parse', '$timeout', '$http', '$q', 'VALIDATION_PENDING', function ($parse, $timeout, $http, $q, VALIDATION_PENDING) {
    return {
        // restrict to an attribute type.
        restrict: 'A',
        require: 'ngModel',
        scope: {
            getEndPoint: '&'
        },
        priority: 1,
        link: function (scope, element, attrs, ngModel) {
            var lastValidationStatus;

            function isUnique(value) {
                //Cancels any ongoing http request
                if(scope.canceler) {
                    scope.canceler.resolve();
                }

                var canceler = scope.canceler = $q.defer();
                var endpointDetails = scope.getEndPoint();
                var params = {};
                params[endpointDetails.paramName] = value;
                var httpDeferred = $http({
                    url: endpointDetails.url,
                    method: 'GET',
                    params: params,
                    timeout: canceler.promise
                });

                ngModel.validationInProgress = true;
                return httpDeferred;
            }

            function setValidity(httpDeferred) {
                httpDeferred.success(function(data) {
                    lastValidationStatus = false;
                    if(data === 'true') {
                        lastValidationStatus = true;
                    }

                    ngModel.validationInProgress = false;
                    ngModel.$commitViewValue(true);
                });

                httpDeferred.error(function() {
                    ngModel.validationInProgress = false;
                });
            }

            ngModel.$formatters.push(function(value) {
                if(value) {
                    var httpDeferred = isUnique(value);
                    setValidity(httpDeferred);
                }
                return value;
            });

            ngModel.$parsers.push(function (value) {
                ngModel.$setValidity('shouldBeUnique', true);

                if(ngModel.$valid) {
                    var httpDeferred;

                    if (ngModel.$modelValue === VALIDATION_PENDING && !ngModel.validationInProgress) {
                        $timeout(function () {
                            ngModel.$setValidity('shouldBeUnique', lastValidationStatus);
                        });
                        if (lastValidationStatus) {
                            return value;
                        }
                        return undefined;
                    }
                    else {
                        httpDeferred = isUnique(value);
                        setValidity(httpDeferred);
                        return VALIDATION_PENDING;
                    }
                }

                return undefined;
            });
        }
    };
}]);

module.constant('VALIDATION_PENDING', '###REMOTE_VALIDATION_IN_PROGRESS###');