When incorrect email addresses are entered and the form is submitted, the error message does not display for the user. However, if additional characters are appended to the existing entries, the message appears on the screen. In debugging, the variable $scope.fError is true and $scope.fErrorMessage contains the correct text, but as mentioned before, it is not shown on the screen.
.controller('PasswordCtrl', ['$scope', '$location', 'CommonProp', function ($scope, $location, CommonProp) {
$scope.forgotpassword = function(e) {
e.preventDefault();
var firebaseObj = new Firebase(CommonProp.getFirebaseURL());
login.loading = true;
if ($scope.passwordForm.$valid) {
firebaseObj.resetPassword({
email: $scope.user.emailaddress
}, function(error) {
if (error) {
$scope.fError = true;
if (error.code == "INVALID_USER") {
$scope.fErrorMessage = "The specified user account does not exist.";
} else {
$scope.fErrorMessage = "Error resetting password:";
}
} else {
$scope.fErrorMessage = "Password reset email sent successfully!";
}
});
}
};
var login = {};
$scope.login = login;
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>AngularJS & Firebase Web App</title>
<script src="https://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-route.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="https://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="forgotpassword/forgotpassword.js"></script>
</head>
<body ng-controller="PasswordCtrl">
<div class="container">
<div class="jumbotron" style="padding-bottom:0">
<h2>Password reset.</h2>
</div>
<form class="form-signin" name="passwordForm">
<div class="form-group" ng-class="{ 'has-error' : passwordForm.emailaddress.$invalid }">
<input type="email" name="emailaddress" placeholder="Email Address" class="form-control" ng-model="user.emailaddress">
<p ng-show="passwordForm.emailaddress.$invalid">Enter a valid email.</p>
<p style="color: red;" ng-show="fError">{{fErrorMessage}}</p>
</div>
<button type="button" ladda-loading="login.loading" data-style="expand-right" ng-click="forgotpassword($event);" ng-disabled="!user.emailaddress" class="btn btn-lg segoe-ui-light ladda-button btn-primary btn-block"><span class="ladda-label">Reset</span></button>
</form>
</div>
</body>
</html>