等待$ 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提交表格

回答

相關問題