differences between ng-submit and ng-click

Question

In angularjs I'm wondering what the differences are between ng-submit and ng-click? Specifically, pros and cons of each and when should you one or the other? Thanks!
**EDIT**
I've looked in to this a bit more but I'm still wondering what (if any) the benefit is of using ng-submit? Could you use an ng-click in place of all ng-submits? Would this cause any problems? Thanks again!

Georgeanngeorgeanna

Both are just wrappers around the native browser events. – Isocrates

Here's an interesting post that will probably help demystify this issue bit.ly/1TUTAAz – Shafting

Answer 1

The ngSubmit directive binds to the submit event in the browser, which is fired when a form is submitted.

From MDN:

Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.)

So you might use it to submit a user sign-up form, or something like that.

On the other hand, the ngClick directive can apply to any kind of element.

From source:

The ngClick directive allows you to specify custom behavior when an element is clicked.

Use it to allow your user to interact with your page in some way other than submitting a form. Maybe to click on a 'previous' or 'next' pager button, or maybe a map or something.

Madian

Answer 2

Angular prevents the default action (form submission to the server) unless the element has action, data-action, or x-action attributes specified.So when using angular with forms without these atributes ng-click and ng-submit can be used to specify which javascript method to call.In either call you can get all input values in a scope because of two-way data binding property of angular. Could you use an ng-click in place of all ng-submits? Would this cause any problems?
it can be used but when using ng-click it does not take html input attributes (like required,min-max,maxlength) into account and executes method body immediately.

Overtone

Thank you, this removes the misconception. So for submitting forms, ng-submit is preferred. For any other interactions, ng-click is what to use. – Chaps

when using ng-click it does not take html input attributes (like required,min-max,maxlength) into account and executes method body immediately............ +1 for demystifying this! – Lotze

Answer 3

My favorite reason for using ng-submit is that it allows you to press the <Enter> key while focused on a form input etc. and the form will submit. (Assuming of course that you have a button of type="submit" in the form.)

Its more keyboard friendly and accessibility friendly than having ng-click on a button, because with ng-submit, a user can click on the submit button or they can press <Enter>.

Amoritta

I was just testing this, and it appears the function runs by pressing enter both ways. I thought this was a benefit of ngSubmit as well, but from my test just now it appears to act the same either way. – Largely

Forgive me, but I don't understand how the function can run without having ng-submit. Placing the ng-submit attribute on the form is what allows you to define the function to run when the <Enter> key is pressed while you are focused on one of the elements of said form. How else would you define a function to run on <Enter> if you don't have an ng-submit? – Amoritta

If change the button "Type" to submit, it does the same-thing(<=Horrible chrome auto correct.)... – Burrows

Answer 4

If we want the form not to be submitted when it is invalid, then instead of ng-click on the button, we will use ng-submit directive on the form itself

    <div class="row">
        <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
            <div id="name-group" class="form-group-lg">
                <input type="text"
                       required
                       name="name"
                       ng-model="userfullName"
                       class="form-control"
                       placeholder="Full Name">
            </div>

In the ng-submit we calling a function AddUser from the controller with a parameter formname.$valid. This submit function will be only called when form is valid or in other words all the user input of the form is valid. Keep in mind that in this case from would not be submitted if form is not valid

When we use ng-click , form will be submitted even if it is invalid. Two observations for ng-click are as follows:

We were able to submit the form even if form was not valid For the invalid inputs, the value was set to undefined in the controller

Tazza

Answer 5

ng-submit associated with forms, this event fires when u submit form. Where as ng-click can work without form submit event

Kremenchug