提交按钮验证（angularjs）

Question

当我点击提交按钮时如何获得提示错误消息并且它没有重定向到其他页面，因为未输入电子邮件/密码在数据库中。

登录.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

你必须对你的代码做一些改变

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

Answer 2

.then 接受 2 个回调函数，如下所示

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

第一个回调在 promise 被解决时调用，第二个回调在被拒绝时调用。

所以，你可以使用拒绝回调：

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