異步驗證器在AngularJS中返回Promise時提交表單

Question

我創建了一個異步驗證器'username-validator'來檢查用戶名的可用性並避免遠程調用的次數，我正在'blur'事件而不是'key press'上更新ng-model。 因此，驗證器僅在“模糊”事件時觸發。

<input type="text" ng-model="signup.username" name="username"
  required 
  username-validator 
  ng-model-options="{ updateOn: 'blur' }">

但是，當表單提交時，它會檢查表單是否有效，然后才提交。

$scope.submit = function(form) {
  if (form.$valid) {
    alert('submitting', $scope.signup.username, $scope.signup.password);
  }
};

但是，當我單擊“提交”按鈕時，如果表單處於$ pending狀態，則表單不會一鍵提交，因為單擊時表單處於$ pending狀態，而$ valid是未定義的。

我想編寫我的$ scope.submit函數來解決$ pending狀態后提交的問題。

我該怎么做？

不想為$ pending狀態禁用Submit按鈕。

為了演示該問題，我在其中添加了正在運行的代碼段。

 angular.module('app', ['ngMessages']) .controller('MainCtrl', function($scope) { $scope.signup = {}; $scope.submit = function(form) { if (form.$valid) { alert('submitting ' + $scope.signup.username + ' ' + $scope.signup.password); } }; }) .directive('usernameValidator', function($q, $timeout) { return { require: 'ngModel', link: function(scope, element, attrs, ngModel) { ngModel.$asyncValidators.username = function(modelValue, viewValue) { if (!viewValue) { return $q.when(true); } var deferred = $q.defer(); $timeout(function() { // Faking actual server-side validity check with $http. // Let's pretend our service is so popular all short username are already taken if (viewValue && viewValue.length < 5) { deferred.reject(); } deferred.resolve(); }, 2000); return deferred.promise; }; } }; });

 .validation-error { color: red; } .validation-pending { color: orange; }

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-messages.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body ng-app="app"> <div ng-controller="MainCtrl"> <form name="myForm" ng-submit="submit(myForm)" novalidate> <div> <label> Username: <input type="text" ng-model="signup.username" name="username" required username-validator ng-model-options="{ updateOn: 'blur' }"> </label> <div ng-if="myForm.username.$dirty"> <div ng-messages="myForm.username.$error" class="validation-error"> <div ng-message="required">Username required</div> <div ng-message="username">Username already in use</div> </div> <div ng-messages="myForm.username.$pending" class="validation-pending"> <div ng-message="username">Checking username availability...</div> </div> </div> </div> <div> <label> Password: <input type="password" ng-model="signup.password" name="password" required> </label> <div ng-messages="myForm.password.$error" ng-if="myForm.password.$dirty" class="validation-error"> <div ng-message="required">Password required</div> </div> </div> <button type="submit">Submit</button> </form> </div> </body> </html>

Answer 1

您可以在檢查用戶名時將諾言附加到作用域

scope.usernameCheck = deferred.promise;
return deferred.promise;

然后在您的Submit函數中等待諾言被解決

$scope.submit = function(form) {
    if ($scope.usernameCheck) {
        $scope.usernameCheck.then(function() {
            if (form.$valid) {
                alert('submitting ' +  $scope.signup.username + ' ' + $scope.signup.password);
            }
        });
    }
};

異步驗證器在AngularJS中返回Promise時提交表單

問題描述

1 個解決方案

解決方案1
0 2016-04-05 20:15:33

異步驗證器在AngularJS中返回Promise時提交表單

問題描述

1 個解決方案

解決方案1 0 2016-04-05 20:15:33

解決方案1
0 2016-04-05 20:15:33