CODEWITHSUNDEEP
javascriptangularjs
Bob
Bob

Reputation: 848

AngularJS ng-submit enter key not working

I am working with AngularJS and have a form with ng-submit in it:

  <div ng-controller="LoginController as vm">
    <form class="login-form" name="vm.form" ng-submit="vm.login()">
            <h3 class="form-title">Sign In</h3>

            <div class="form-group">
                <label class="control-label">E-mailaddress</label>
                <input class="form-control" type="text" 
                      name="email" ng-model="vm.email"/>
            </div>
            <div class="form-group">
                <label class="control-label">Password</label>
                <input class="form-control" type="password" name="password" ng-model="vm.password"/>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success uppercase">Login</button>
            </div>    
        </form>
   </div>

The issue: When I click manually on Login, everything works just fine. ng-submit is correctly used by calling vm.login(). However, when I press the enter key, ng-submit isn't called. I've search for a long time, watched examples, read issues at GitHub but can't figure this out... Any suggestions?

Edit

The requested controller-code:

 angular.module('app').controller('LoginController', function LoginController(LoginFactory, $state) {
        'use strict';
        var vm = this;

        vm.login = login;

        function login() {
            console.log('login');
            LoginFactory.login(vm.email, vm.password).then(function success(response) {
                LoginFactory.setUser(response.data.data.user);
                vm.user = response.data.data.user;
                var savedState = LoginFactory.getOnLoginState();
                $state.go(!savedState.state ? 'root.dashboard' : savedState.state, savedState.stateParams);
            }, handleError);
        }

    });

Upvotes: 2

Views: 3008

Answers (3)

Victor Lia Fook
Victor Lia Fook

Reputation: 430

It is not going to work that way, as we can check on Angular's docs:

if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit

As a workaround, I would suggest using two form tags, one to each field, both using the same function in ng-submit, something like:

<div ng-controller="LoginFactory">
    <form class="login-form" ng-submit="vm.login()">
        <h3 class="form-title">Sign In</h3>

        <div class="form-group">
            <label class="control-label">E-mailaddress</label>
            <input class="form-control" type="text"
                    name="email" ng-model="vm.email"/>
        </div>
    </form>
    <form class="login-form" ng-submit="vm.login()">
        <div class="form-group">
            <label class="control-label">Password</label>
            <input class="form-control" type="password" name="password" ng-model="vm.password"/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase">Login</button>
        </div>
    </form>
</div>

Upvotes: 2

Rayon
Rayon

Reputation: 36609

I have tried to your code assuming your controller as provided below and its working as expected. Give it a try:

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="LoginFactory">
    <form class="login-form" name="vm.form" ng-submit="vm.login()">
        <h3 class="form-title">Sign In</h3>

        <div class="form-group">
            <label class="control-label">E-mailaddress</label>
            <input class="form-control" type="text"
                    name="email" ng-model="vm.email"/>
        </div>
        <div class="form-group">
            <label class="control-label">Password</label>
            <input class="form-control" type="password" name="password" ng-model="vm.password"/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase">Login</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    'use strict';
    angular.module('app', []).controller('LoginFactory', function LoginController($scope){
        $scope.vm={};
        $scope.vm.login=login;
        function login(){
            console.log('login');
        }
    });
</script>
</body>
</html>

Upvotes: 0

road2victory
road2victory

Reputation: 496

Alternatively You can also solve it by building the ng-enter directive and use it. Below is the code snippet to do so.

angular.module('myApp').directive('ngEnter', function () {
return function (scope, element, attrs) {
    element.bind('keydown keypress', function (event) {
        if(event.which === 13) {
            scope.$apply(function (){
                scope.$eval(attrs.ngEnter);
            });
            event.preventDefault();
        }
    });
};

});

Upvotes: 1

Related Questions