Проверка на кнопку отправки (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

.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; 
} 

Answer 2

вы должны сделать несколько изменений в коде

Вход в систему.

<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 
}; 
    }]);