等待$ asyncValidators提交表格

我有一个具有用户名字段和其他字段的表单，此字段有一个异步验证程序，用于在您尝试提交表单时检查该用户名是否可用（使用异步验证的形式）。我使用这个指令来验证和提交表单（仅当它是有效的）：

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

问题是这样的指令，不等待挂起异步验证到结束。我如何才能更改此指令，以便在所有异步验证完成并通过后才提交？

来源

2014-12-08 dbabaioff

你需要验证服务器端提交（永远不要相信客户端数据和所有这些），那么为什么不立即提交？ – Alan 2014-12-08 08:42:14

完全同意Alan ...如果你真的想做异步验证，请在特定的用户名字段上进行，而不是在提交... – harishr 2014-12-08 08:45:55

@harish好吧，让我们来说说我对该特定字段进行了验证 - 如何才能我阻止提交，直到它完成对该字段的验证？ – dbabaioff 2014-12-08 08:48:52

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

app.directive('validationSubmit', ['$parse', function($parse) { 
    return { 
     restrict: 'A', 
     require: '?form', 
     link: function(scope, element, attrs, 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 
     } 
}

来源

2015-04-21 17:19:36

等待$ asyncValidators提交表格

回答

相关问题