Set submit button for ng-submit form

Question

According to the docs, pressing enter in a form would "trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)". Is there any way to instead set which button should be triggered?

I have a form in which pickadate.js creates some button elements before the submit button.

could you catch the enter keypress and prevent the default behaviour? — Cathal
Why don't you simply use ng-submit on the form instead of a certain button? — Sergiu Paraschiv

Artyom Pranovich Artyom Pranovich · Accepted Answer · 2014-10-24T12:32:26

It doesn't matter how many buttons are before the submit button.

If you have ngSubmit directive on your form element function inside ng-submit="" will be fired.

For example.

<div ng-controller="MyCtrl">
    <form ng-submit="processForm()" name="myFormName">
        <input type="text" ng-model="myForm.name" placeholder="name" required="required"/>
        <input type="text" ng-model="myForm.email" placeholder="email" required="required"/>

        <input type="button" value="First button" ng-click="alert('First button')"/>
        <input type="button" value="Second button" ng-click="alert('Second button')"/>
        <input type="submit" value="Submit"/>
    </form>
</div>

When you press the 'Enter' key (in my example) angular will call $scope.processForm function and you will see "Submitting form.." message.

$scope.processForm = function(){
    alert("Submitting form..");
}

I've created JSFiddle example for you.

Set submit button for ng-submit form

1 Answers