javascript - 提交按钮验证（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

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

Answer 2

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

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