[英]Validation on submit button (angularjs)
當我單擊“提交”按鈕並且由於未輸入電子郵件/密碼而未重定向到另一頁時,如何獲得提示錯誤消息,該消息已存儲在數據庫中。
<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>
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');
});
};
}])
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
};
}]);
.then接受如下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;
}
您必須在代碼中進行一些更改
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
};
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.