angularjs – 等待$asyncValidators提交表单

发布时间：2020-12-17 16:57:31 所属栏目：安全来源：网络整理

导读：我有一个具有用户名字段和其他字段的表单,此字段有一个异步验证器,用于在您尝试提交表单时检查该用户名是否可用(表单上的其他字段使用异步验证).我使用此指令验证并提交表单(仅当它有效时)： form validation-submit="submit()"/form app.directive('validat

我有一个具有用户名字段和其他字段的表单,此字段有一个异步验证器,用于在您尝试提交表单时检查该用户名是否可用(表单上的其他字段使用异步验证).我使用此指令验证并提交表单(仅当它有效时)：

<form validation-submit="submit()"></form>

app.directive('validationSubmit',['$parse',function($parse) {
    return {
        restrict: 'A',require: '?form',compile: function($element,attr) {
            var submitFn = $parse(attr.validationSubmit);

            return function link(scope,element,attrs,FormController) {
                var submit = function(event) {
                    scope.$apply(function() {
                        if (! FormController.$valid) {
                            return;
                        }

                        submitFn(scope,{$event: event}));
                    });
                };

                element.bind('submit',submit);

                scope.$on('$destroy',function() {
                    return element.off('submit',submit);
                });
            }
        }
    };
}]);

问题是该指令不等待挂起的异步验证完成.如何将此指令更改为仅在完成并传递所有异步验证后提交？

解决方法

最近我创建了一些指令,检查电子邮件或电话号码是否可用.我找到了帮助我的解决方案.这是 $asyncValidators.

app.directive('validationSubmit',link: function(scope,FormController) {
                /**
                *returns promise
                **/
                FormController.$asyncValidators.validEmail = function (modelValue) {
                    return $q(function (resolve,reject) { 
                    //Here you should make query to your server and find out wether username valid or not
                    //For example it could be:
                    $http('http://your_api_server/Available').then(function (response) {
                            if (response.data.Available) {
                                resolve();
                            } else {
                                reject();
                            }
                        },function (err) {
                            reject(err.data);
                        });  
                        });
                };
            }

    };
}]);

您应该向表单添加属性名称：

<form validation-submit="submit()" name="myForm"></form>

现在您有机会在控制器中检查表单的系统属性：

$scope.submit = function(){
    //Here will be your logic
    if($scope.myForm.$valid ||
       $scope.myForm.$invalid || 
       $scope.myForm.$pending ||
       $scope.myForm.$submitted){
          //do whatever you want
        }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!