Should I use Ng-submit or ng-click on a form?

Question

I would like to know if there is a preference to using ng-click on a submit button or just having a ng-submit on a form?

My assumption is that we should use ng-submit on all forms and use ng-click on anything that isn't a form.

I know the differences that are listed below:

ng-submit allows the user to press enter when focused on a form where ng-click doesn't
ng-click can be used on any element where as ng-submit only can be applied to a form element.

I was wondering if anyone can add anything else to this list as I would like to know what the norm is in a angular project.

almost similar question: http://stackoverflow.com/questions/23553071/differences-between-ng-submit-and-ng-click — Sk. Tajbir, May 19 '16 at 12:22
Thanks, I've already read this though. I was hoping for someone to give me more detail. — MaxwellLynn, May 19 '16 at 12:23
I think one reason for wanting to use ng-submit is that it fires when enter is pressed in the form. — fhollste, May 19 '16 at 12:36

score 4 · Answer 1 · answered May 19 '16 at 12:42

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

Good point here. however you could also get the scope of the form in the controller by doing scope.adduser. Something we are currently debating and then do the validation in the controller. However I guess what your saying is that you wouldn't have to do any validation in the controller with ng-submit. — MaxwellLynn, May 19 '16 at 12:53
That is my point. using ng-submit, we do not have to do any validation manually inside the controller — debugmode, May 22 '16 at 03:00

score 0 · Answer 2 · answered May 19 '16 at 12:22

0

Out of experience, for mobile apps using Angular and Ionic, I used ng-click because even when the form isn't valid, the mobile keyboard arrow (Android) or GO (iOS) is enabled and will still submit it anyway. I had to use ng-click to avoid validation problems.

On web, I use ng-submit simply because, like you said, it submits on enter.

answered May 19 '16 at 12:22

Greg

1,382
3
22
45

Hmm interesting what if your web app is responsive and works on a mobile device? – MaxwellLynn May 19 '16 at 12:25
Then I'd use `ng-click` as well. If there's `ng-submit` in your form then you'll get the arrow and GO on devices. If you use `ng-click` then you only have your numbers and letters. There might be a workaround I don't know about, but that's just my experience :) – Greg May 19 '16 at 12:28
I've read if you use both your form will get submitted twice, might be worth us using ng-click in our case. – MaxwellLynn May 19 '16 at 12:32

Should I use Ng-submit or ng-click on a form?

2 Answers2