AngularJS - ngClick is blocking submit key action

Question

The user of my web should enter a simple code using buttons in my form and after that he should click Ok or hit enter and continue with proccess.

The thing is that the enter key is not submiting my form, is executing other method that is called from ng-click. How can avoid enter key call the ng-click method?

myapp.js

var myApp = angular.module('myApp',[]);

myApp.controller('myformcontroller', ['$scope', function ($scope){
    // Procesing data from form.
    $scope.signin = function () {
    }
}]);

myApp.controller('mycontroller', ['$scope', function ($scope){
   $scope.do = function() {
       alert('ng-click pressed!');
   }
}]);

myform.html

<div ng-controller="myformcontroller">

    <form name="myForm"
          role="form" 
          ng-submit="signin()" 
          novalidate>

        <input type="text"/>

        <div ng-controller="mycontroller">
            <a href="javascript:void(0);" ng-click="do()">
                clickme!
            </a>
        </div>

        <button type="submit">Ok</button>
    </form>

</div>

Press click me and hit enter key after on My Fiddle

that doesn't make any sense; `ng-click` doesn't change an `` into a ` — Claies, Jul 14 '15 at 14:59
looks more like a scope problem, form is under different controller scope than the `` tag. WHy is there a different controller inside the form? WHere is the controller for the form? — charlietfl, Jul 14 '15 at 15:27
Because the do() method is showing simple messages to the user before the form is submitted. And I'm dealing with an mandatory app structure on my project. — napstercake, Jul 14 '15 at 15:31
Seems to me that because they are clicking the link, that element has focus. Maybe at the end of the do() function add some jQuery to change the page focus: $('#submit').focus(); — Ryan H, Jul 14 '15 at 16:04
could use a span or something that doesn't take focus like an `` does. If you change to span issue dissappears. Might need to add some aria attributes if accessibility is important — charlietfl, Jul 14 '15 at 16:06
@charlietfl that solved my problem. I'm still not getting my form submited with the enter key but I think it is easy to solved. — napstercake, Jul 14 '15 at 16:37
likely because you have nothing within form that takes focus — charlietfl, Jul 14 '15 at 16:38
@charlietfl you are right! sorry for that, I'm very blocked right now. Thanks for everything! — napstercake, Jul 14 '15 at 16:46

score 0 · Answer 1 · edited May 23 '17 at 11:51

It is not blocking. You're missing a standard input to bubble the properly handled click event. If there is no input, the form is not submitted by default. It's not an angular issue. Take a look here https://stackoverflow.com/a/477699/4573999

EDIT
More detailed explanation based on comments. The question is not about the submit element. Sure, you have a button type submit. The for other elements inside the form there is a default behavior. And for input element the default on enter key is to submit the form that it is surrounded by. But for the anchor tag it is not. Because it is not supposed to provide any data. Why would you want to submit a form on a link? So in your case you should submit the form programmatically by calling appropriate method.

myApp.controller('myformcontroller', ['$scope', function ($scope){
    $scope.signin = function () {
               alert('submit!');
    }
}]);

myApp.controller('mycontroller', ['$scope', function ($scope){
   $scope.do = function() {
       alert('ng-click pressed!');
       $scope.signin();
   }
}]);

Check updated fiddle
If you'd like to get this in a generic way, you can parse the ng-submit value like here How to programmatically submit a form with AngularJS

not true, button will do the same as long as it is type=submit which is default of no type is set — charlietfl, Jul 14 '15 at 15:17
Same result changing my button to input with submit type. :( — napstercake, Jul 14 '15 at 15:19

score 0 · Answer 2 · answered Jul 14 '15 at 15:19

You can ommit html rules with jquery. Add id to a form and button first:

<form id="mydiv" name="myForm"
    role="form" 
    ng-submit="signin()" 
    novalidate>

    <div ng-controller="mycontroller">
       <a href="javascript:void(0);" ng-click="do()">
          <img src="img/a-letter.png" alt="">
        </a>
    </div>

    <button id="mydiv2" type="submit">Ok</button>
</form>

And then set listener on enter up:

$("#mydiv").keyup(function(event){
if(event.keyCode == 13){
    $("#mydiv2").click();
}
});

So it's not elegant, but you can submit form with simulating click on enter pressed.

AngularJS - ngClick is blocking submit key action

2 Answers2