I'm trying to get a login-form to submit when the user presses enter. The form works perfectly fine when the "Login"-button is clicked, but pressing enter doesn't work and furthermore, causes a strange behavior:
- the function associated by
ng-submitis not being executed - the error message (login failed) is never being displayed again after pressing enter
Here's my markup:
<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" autoplete="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" autoplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions">
<button class="btn btn-success uppercase">Login</button>
</div>
</form>
Note that I tried replacing <button...> with <input type="submit"...> with no success either.
The corresponding controller with the login()-function looks as follows:
.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;
});
};
}]);
I run angular v1.4.0 and use angular-ui-router v.0.2.15 for routing.
Thanks for any input, much appreciated.
I'm trying to get a login-form to submit when the user presses enter. The form works perfectly fine when the "Login"-button is clicked, but pressing enter doesn't work and furthermore, causes a strange behavior:
- the function associated by
ng-submitis not being executed - the error message (login failed) is never being displayed again after pressing enter
Here's my markup:
<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" autoplete="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" autoplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions">
<button class="btn btn-success uppercase">Login</button>
</div>
</form>
Note that I tried replacing <button...> with <input type="submit"...> with no success either.
The corresponding controller with the login()-function looks as follows:
.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;
});
};
}]);
I run angular v1.4.0 and use angular-ui-router v.0.2.15 for routing.
Thanks for any input, much appreciated.
Share Improve this question asked Jul 8, 2015 at 11:48 user1631668user1631668 2- stackoverflow./questions/15417125/… – Gopinath Shiva Commented Jul 8, 2015 at 11:53
- Thanks Gophinath - I've stumbled upon this answer already when looking for an answer to my question. I haven't tried out the custom directive that listens for enter-presses (key nr. 13) because I don't intend to do workarounds when angular obviously claims that by using ng-submit the form should submit out of the box. – user1631668 Commented Jul 8, 2015 at 12:47
2 Answers
Reset to default 5Put this one
<input type="submit" class="btn btn-success uppercase" value="Login" >
instead of
<button class="btn btn-success uppercase">Login</button>
For form submitting button should be type of submit.
EDIT CODE :
<form class="login-form" ng-submit="login()" >
<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" autoplete="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" autoplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions">
<input type="submit" class="btn btn-success uppercase" >
</div>
</form>
Also please check whether your LoginCtrl is places above your form DOM.
EDIT CODE :
Please check this Plunker
Instead of Button use <input type ="submit" />