Validation on submit button (angularjs)

Question

How can I get a prompt error message when I click on the submit button and it does not redirect to the other page because the email/password is not entered is in the database.

sign-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 (controllers)

    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 (services)

    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 accepts 2 callback function like below

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

First callback is called when a promise is resolved, and the second one when rejected.

So, you can make use of reject callback:

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

and use $q service in login function as below

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

you have to do few changes in your code

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>

controller (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.
}
}])

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