驗證提交按鈕（angularjs）

Question

當我點擊提交按鈕時，如何獲得提示錯誤消息，並且由於沒有輸入電子郵件/密碼的數據庫中沒有重定向到其他頁面。

登錄in.html

<form class="contact" ng-submit="login()"> 
    <div class="container"> 
     <h3>Sign in</h3> 
     <div class="contact-form"> 
      <div class="col-md-6 col-md-offset-3"> 
       <input type="email" ng-model="user.email" placeholder="Email address" required autofocus> 
       <div> 
       <input type="password" ng-model="user.password" placeholder="Password" required autofocus> 
       </div> 
       <div class="clearfix"> </div> 
       <button type="submit">Submit</button> 
      </div> 
     </div> 
    </div> 
</form> 

auth.js（控制器）

angular 
    .module('app') 
    .controller('AuthLoginController', ['$scope', 'AuthService', '$state', 
     function($scope, AuthService, $state) { 
    $scope.user = { 
     email: 'example01@gmail.com', 
     password: 'example123' 
    }; 
    $scope.login = function() { 
     AuthService.login($scope.user.email, $scope.user.password) 
     .then(function() { 
      $state.go('home'); 
     }); 
    }; 
    }]) 

auth.js（服務）

angular 
    .module('app') 
    .factory('AuthService', ['Viewer', '$q', '$rootScope', function(User, $q, 
     $rootScope) { 
    function login(email, password) { 
     return User 
     .login({email: email, password: password}) 
     .$promise 
     .then(function(response) { 
      $rootScope.currentUser = { 
      id: response.user.id, 
      tokenId: response.id, 
      email: email 
      }; 
     }); 
    } 
    return { 
     login: login, 
     logout: logout, 
     register: register 
    }; 
    }]); 

Answer 1

。然後接受2回調函數像下面

.then(function(){}, function(){}) 

當承諾解決時調用第一個回調函數，當第二個回調函數被拒絕時調用。

所以，你可以利用拒絕回調的：

AuthService.login($scope.user.email, $scope.user.password) 
    .then(function() { 
     //resolved 
     $state.go('home'); 
    }, function(){ 
     //rejected 
     //Error handling - show error message. 
    }); 

，並在登錄功能使用$ Q服務如下

function login(email, password) { 
    var deferred = $q.defer(); 
    User 
     .login({email: email, password: password}) 
     .$promise 
     .then(function(response) { 
      if(response.user){ 
       $rootScope.currentUser = { 
        id: response.user.id, 
        tokenId: response.id, 
        email: email 
       }; 
       //resolve promise 
       deferred.resolve(); 
      } else { 
       //reject promise 
       deferred.reject(); 
      } 
     }); 
    return deferred.promise; 
} 

Answer 2

你必須做一些改變你的代碼

sign-in.html

<form name="myForm" class="contact" ng-submit="login(myForm.$valid)" novalidate> 
<div class="container"> 
    <h3>Sign in</h3> 
    <div class="contact-form"> 
     <div class="col-md-6 col-md-offset-3"> 
      <input type="email" ng-model="user.email" placeholder="Email address" required autofocus> 
      <div> 
      <input type="password" ng-model="user.password" placeholder="Password" required autofocus> 
      </div> 
      <div class="clearfix"> </div> 
      <button type="submit">Submit</button> 
     </div> 
    </div> 
</div> 
</form> 

控制器（auth.js）

angular 
    .module('app') 
.controller('AuthLoginController', ['$scope', 'AuthService', '$state', 
    function($scope, AuthService, $state) { 
$scope.user = { 
    email: 'example01@gmail.com', 
    password: 'example123' 
}; 
$scope.login = function(isValid) { 
if(isValid) 
{ 
    AuthService.login($scope.user.email, $scope.user.password) 
    .then(function(response) { 
    if(response.user != undefined) 
    { 
     $state.go('home'); 
    }else 
    { 
     // user not present in database. 
    } 

    }); 
}; 
}else 
{ 
    // form fail to validate. 
// display error message here. 
} 
}]) 

服務（auth.js）

angular 
    .module('app') 
    .factory('AuthService', ['Viewer', '$q', '$rootScope', function(User, $q, 
    $rootScope) { 
function login(email, password) { 
    return User 
    .login({email: email, password: password}) 
    .$promise 
    .then(function(response) { 
     $rootScope.currentUser = { 
     id: response.user.id, 
     tokenId: response.id, 
     email: email 
     }; 
     return response; 
    }); 
} 
return { 
    login: login, 
    logout: logout, 
    register: register 
}; 
    }]);