Having trouble with a login form that won't submit when the user presses enter. While the form works fine when the "Login" button is clicked, hitting enter doesn't trigger submission and leads to some unexpected behavior:
- The
ng-submitassociated function is not executed - The error message (login failed) disappears and isn't displayed again after hitting enter
This is the markup in question:
<form ng-submit="login()" class="login-form">
<div class="alert alert-danger" ng-class="{ 'display-hide': !showError }">
<button class="close" data-close="alert"></button>
<span> Login failed </span>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Username</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username" ng-model="username"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions">
<button class="btn btn-success uppercase">Login</button>
</div>
</form>
I've even tried replacing <button...> with <input type="submit"...> but had no success.
Here's how the controller with the login() function looks:
.controller('LoginCtrl', ['$rootScope', '$scope', ..., function LoginController ($rootScope, $scope, ...) {
$scope.showError = false;
$scope.login = function()
{
console.log("logging in");
$http({
url: $scope.apiEndpointLogin,
method: 'POST',
data: {'username': this.username, 'password': this.password}
}).then(function(response) {
$scope.showError = false;
[...]
}, function() {
$scope.showError = true;
});
};
}]);
Running on angular v1.4.0 and using angular-ui-router v.0.2.15 for routing.
Any help would be greatly appreciated, thank you!