AngularJS |使用ng-blur和條件變量驗證電子郵件唯一性

Question

使用ng-blur我在用戶提交表單之前確認電子郵件地址的唯一性。我期待下面的代碼只顯示「該電子郵件地址是」當它執行$http.put並收到409（我確認正在發送）。在其他所有情況下，emailIsAvailable變量應該保持爲true，我不應該看到「該電子郵件地址已被佔用」。不幸的是，該錯誤顯示是否API發送409或200

HTML：

<div class="form-group" ng-class="{'has-error' : signup.email.$invalid && signup.email.$dirty}"> 

     <div> 
     <input type="text" name="email" class="form-control" placeholder="Email" ng-model="signupForm.email" ng-blur="validateEmail()" required> 
     <span class="help-block has-error" ng-if="signup.email.$dirty"> 
      <span ng-show="signup.email.$error.required">Email address is required.</span> 
      <span ng-show="signup.email.$error.email">Not a valid email address.</span> 
      <span ng-hide="emailIsAvailable">That email address is taken.</span> 
     </span> 
     </div> 
    </div> 

控制器：

$scope.emailIsAvailable = true; 

    $scope.validateEmail = function() { 

    var email = $scope.signupForm.email; 

    console.log(email); 

    if (email === undefined) { 
     return; 
    } else if (AuthService.validateEmail(email) === true) { 
     $scope.emailIsAvailable = true; 
     return; 
    } else { 
     $scope.emailIsAvailable = false; 
     return; 
    } 
    }; 

服務：

validateEmail: function (email) { 
    return $http.put('/api/user/validateEmail', { 
    email : email 
    }) 
    .then(function onSuccess (res) { 
    return true; 
    }) 
    .catch(function (res) { 
    return false; 
    }); 
} 

Answer 1

AuthService.validateEmail函數返回一個承諾。

你需要重構你如何調用它。

$scope.emailIsAvailable = true; 

$scope.validateEmail = function() { 
    var email = $scope.signupForm.email; 

    console.log(email); 

    if (email === undefined) { 
    return; 
    } else { 
    AuthService.validateEmail(email) 
    .then(function onSuccess (res) { 
     $scope.emailIsAvailable = true; 
    }) 
    .catch(function (res) { 
     $scope.emailIsAvailable = false; 
    }); 
    } 
};