Question

我正在使用一个简单的异步验证器，用这样的指令来检查用户名是否存在

var app = angular.module('app');

app.directive('usernameAvailableValidator', function($http, $q) {
    return {
        require : 'ngModel',
        link : function($scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.usernameAvailable = function (modelValue, viewValue) {
                var value = modelValue || viewValue;
                return $http.get('/api/check-availability?username=' + value)
                    .then(function (response) {
                        if (response.data.userFound) {
                            return $q.reject();
                        }
                        return true;
                    });
            };
        }
    };
});

这很有效。唯一的问题是，当我输入时，我用ng-if显示的错误和成功消息闪烁。我不知道如何解决这个问题。而不是向您显示更多代码，我已经上传了表单来演示闪烁。

我有一个没有异步验证的表单根本没有闪烁。

一种具有异步验证的表单，使消息闪烁。

可以在此处找到不闪烁的表格：

http://itexpert.no/register2

如果您尝试输入像“亚历山大”这样的用户名，然后模糊，然后一直退回到空，然后再次写“亚历山大”，您将看到消息按照预期显示。它们不会闪烁。这没有异步验证。

现在，如果您使用异步验证在此表单上尝试上述相同的操作，您将看到闪烁消息的含义。

http://itexpert.no/register

我发现这非常令人沮丧，但我完全碰到了这里，我不知道如何阻止它。

Answer 1

由于Angular正在将模型更新为用户类型，因此使用异步验证器进行了很多请求。

将ng-model-options指令与异步验证器输入一起使用。

ng-model-options="{ updateOn: 'blur' }"

这种方式只会在您离开输入时进行异步调用。

另一种选择是使用去抖效果

ng-model-options="{ debounce: 1000 }"

此选项告知仅在延迟1秒后更新模型。

请参阅ng-model-options https://code.angularjs.org/1.3.13/docs/api/ng/directive/ngModelOptions

上的文档

AngularJS异步验证使错误消息闪烁

1 个答案: