Submit with button, on enter, outside of form with only Angular

Question

What solution would you implement for an Angular "form", where you wanted it to submit on an enter key press, but you can't rearrange the elements to fit in a <form> element. For instance something like this:

<div>
    <input/>
    <input/>

    //This might act as a kind of custom built select
    <ul>
        <li></li>
    </ul>

    <form></form> //Dropzone form for instance.

    <button type="submit" ng-click="submitFunction()">Submit</button>
</div>

I want the user to be able to hit enter while the focus is on any of these elements(Not just the true form elements), and have the form submit(validation passing of course). The solution should be purely Angualr(if possible). I'd rather it didn't use complex CSS positioning, I don't want to have to rearrange and muddle the html structure.

I saw a solution online for a custom "ngEnter" type directive that I thought had promise but I don't think everyone on the team is gonna like that solution. I'd like to know how else one might approach this.

ng-keypress then check the keycode and trigger submitFunction() — John Vandivier, Apr 05 '17 at 18:35
see [this link](http://stackoverflow.com/a/29133805/3931488) for more. You can also use ng-click because enter triggers this. — John Vandivier, Apr 05 '17 at 18:43

score 0 · Accepted Answer · edited May 23 '17 at 12:32

See this article for more info.

Here's a snippet showing how to conditionally log to the console using ng-keypress:

angular.module('myExample', [])
  .controller('myController', ['$scope', function($scope) {
    $scope.myFunction = function() {
     console.log('hi!');
    }
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myExample">
  <div ng-controller="myController">
    <input placeholder="type something" ng-keypress="$event.which === 13 && myFunction()">
  </div>
</div>

Submit with button, on enter, outside of form with only Angular

1 Answers1