Angular.js: ng-submit doesn't work with ng-form

[pablocaselas]

Here's a plunkr to ilustrate the behaviour....

http://plnkr.co/edit/gist:3510140?p=preview

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[nelsonpecora]

Yep, this issue is still around (as of 1.2-rc.2). I'll test on rc3 and update this ticket.

EDIT: Confirmed, this is still broken in rc3. Relevant Plnkr

UPDATE: I tried my hand at a fix (adding 'submit' trigger to ngForm's input elements (onclick)), but I know I'm going about it the wrong way. Here's what I have so far.

[jdrake]

+1 I'm seeing this in 1.2.0.

[nelsonpecora]

Confirmed, this is happening in 1.2.2.

[Narretz]

From the looks of it, it cannot work as <ng-form> or <div ng-form> is not a form element, and so will never fire the 'submit' event. It's prettfy fiddly to emulate form behavior completely. There was a section in the angular docs about this, but I can't seem to find it:

Pressing enter in a text field -> submit
Pressing space or enter when a input or button with type=submit has focus -> submit
clicking a button or input with type=submit -> submit

[mdedetrich]

I can confirm this issue for 1.2.9, using ng-form instead of form as an element means that ng-submit will not work

[chrisolsen]

I can also confirm this issue exists in 1.2.13.

[ashaffer]

+1

[ckcollab]

+1

[OliverJAsh]

Could you listen to keydown events on the ngForm element, where you’d check the conditions of the keydown (is it an etc.) and then manually dispatch a submit event on the form, if the conditions are right? If this sounds like it’d work, say the word I’ll give it a shot.

[OliverJAsh]

I imagine we’ll also need to watch for when the form’s submit button is actioned (either by mouse or keyboard… or touch, ha).

[gadgster]

+1.

The docs say that NG-FORM is a replacement for FORM but it isn't if submit doesn't work. If this can't be done then it should at least be noted in the docs.

[frapontillo]

I agree that this should be a built-in functionality of ngForm.

[tmundt]

+1
Are there intentions to change behaviour of ng-form/ng-submit? I think ng-form is useless if ng-submit does not work with it!

[mdedetrich]

+1, however, are there any decisions about how event handling with ng-form will work with stuff like nested forms (stuff that the regular form doesn't have to deal with)

[OliverJAsh]

I've had a little play trying to get the submit event triggering on a non-FORM element when it should (when the submit button is clicked, or when the ENTER key is pressed).

http://jsfiddle.net/C62fM/3/

I'm not sure how to polyfill this behaviour exactly. What buttons should trigger the submit event? All of them, or only the first? I believe BUTTON elements will only trigger submit if they do not have a type attribute set to button, but I'm not sure what other rules there might be.

I've also created a fiddle to demonstrate the default behaviour of a FORM element with regards to the submit event: http://jsfiddle.net/e8waV/

[tbosch]

Hi,
ng-form is just for grouping controls, it was never meant to be a replacement for a real form with all of its capabilities (e.g. posting to the server, ...). You are right that the docs don't state this very well. I will update the docs with another sentence to clarify this.

[csmosx]

Perhaps ng-fieldset would be a more appropriate name then.

[raphaelyancey]

A case where it would be nice to have ng-submit working with ng-form is when you have the following multiple forms structure:

<!-- used to group and check the validity of all the forms with global.$valid -->
<form name="global">
    <!-- the actual, usable forms -->
    <ng-form name="form" ng-repeat="..." ng-submit="handle()">
        <!-- used for controls grouping -->
        <ng-form name="group" ng-repeat="..."></ng-form>
        <button type="submit">Submit</button>
    </ng-form>
</form>

(see Plunker)

... and want to be able to check the validity of all the forms.

[gkalpak]

Why would want to check the validity of all forms, if you can submit them separately ?

[raphaelyancey]

In this specific case, the user can save each model separately, or save all the models. Therefore, I need to know if each model's form is valid to wether enable the "Save All" button or not.

I edited the previous post with this Plunker (see the comment in the HTML).

[rainboxx]

A client has a wizard like form with several input fields plus some nested forms for grouping (steps). We need to validate each step with a "submit"-like trigger and maybe also firing some backend calls. We tried using plain form elements and this does work in some browsers. However, since this is basically invalid HTML, we wanted to switch to ngForm and noticed that it is _not_ a replacement for form tags as stated in the docs. After looking at this issue here I saw that it is mentioned in the docs about the ngForm directive but at https://docs.angularjs.org/api/ng/directive/form it says that:

Angular provides the ngForm directive which behaves identically to <form>

I think it is a valid use case to handle a submit of nested forms, also firing backend calls or whatever, so this should be at least a feature request.

[dominique-mueller]

I have the following use case:

A user can edit a list (edit entries, add new entries, delete entries) and then either cancel his changes (which resets the list to what it was before) or save all changes. The whole cancel or save action happens within a form, so all fields are being checked and validated on submit.

But when the user tries to add a new entry, this entry should also be checked and validated before being added to the list.

Of course the complete list is being validated in the most outer form, but it would be nice to validate this 'new entry' sub-form - primary because of disabling some buttons and using the automatic 'submit via enter' functionality, so basically because of UI and UX awesomeness ;)

So in my optinion this feature would really be nice to have.

[katlimruiz]

+1

[LeleDev]

+1

[fferraris]

+1

[itslikegood]

+1

[filipesilva]

Also having this issue.

EDIT: I ended up working out my particular use case by giving individual forms interpolated names (as indicated in this stackoverflow answer) and validating each one individually.

For instance (using controllerAs: 'vm')

<div ng-repeat="item in vm.items">
  <form name="vm.formForItem{{item.id}}" novalidate
    ng-submit="(vm['formForItem' + item.id].$valid && vm.doSomething()">
    <input name="inputName" type="text" required>
    <div ng-messages="vm['formForItem' + item.id].inputName.$error">
      <div ng-message="required">
        <small>This field is required</small>
      </div>
    </div>
    <button type="submit" name="button"> Submit </button>
  </form>
</div>

I didn't bother to give each form control interpolated names though, since they are objects within the form.

[e-oz]

ng-submit still doesn't work with ng-form (so ng-form is not just alias of form).

[MarkPieszak]

Here's an update for everyone, since I ran into this issue myself.
This is still an issue in version 1.4.7.

Here's the directive code on github (no jQuery depedencies or anything)

DEMO here

Directive fix (no jQuery or any other dependencies):

With this directive, any ngForm will automatically call any input | button with type="submit".
It also fixes ngSubmit to work with ngForm (same functionality, you can even omit ng-click on your button)

ngForm directive useage: (Automatically calls any input/button with type="submit")

<ng-form>
    <!-- some inputs -->
    <button type="submit"
        ng-click="vmDemo.submitThisForm()">
        Submit Button
    </button>
</ng-form>

ngSubmit functionality fix for ngForm:

<ng-form ng-submit="vmDemo.submitThisForm()">
    <!-- some inputs -->
    <button type="submit">
        Submit Button
    </button>
</ng-form>

This would be nice to have built-in to Angular, since like most of you are saying, ngForm without ngSubmit or even the Enter key working (and hitting a submit) is kind of pointless.

I'm going to see if I can potentially make a Pull-Request for this issue.

[e-oz]

@mcpDESIGNS you can make pull request and team will consider if they can make it built-in. But before it, please consider to add tests and please don't use "ng" prefix for custom directives, it's kind of "reserved" :)

[MarkPieszak]

@e-oz I'll take a look, doesn't seem like it'd be too bad to tackle natively.

Oh of course! I never use ng, I simply wanted to add it _on-top_ of the original ngForm directive, without having to add another. I probably should of just extended it now that I think about it :)

[moshfeu]

The demo link is not working so I made a new one on bin

[MarkPieszak]

@moshfeu Sorry about that, just fixed the link to it, the Demo should work now!

ngForm fix demo

[moshfeu]

A. The problem is if there are multiple buttons, the first will be the submit button, even it has no type=submit attribute. You can see it here. So I replaced the if ($current.type.toLowerCase() === 'submit') { width if ($current.getAttribute('type') && $current.getAttribute('type').toLowerCase() === 'submit') {.

Another problem that there is no $submitted property and no ng-submitted class to the ng-form. The class issue I solve with adding $element.addClass('ng-submitted'); after the line $parse($attrs.ngSubmit)($scope);. But I couldn't solve the $submitted issue.

This is very strange based on the fact that the ng-form object has property $submitted which is false all the time and I couldn't set it to true.

I tried:

1. $element.$submitted = true; - no effect.
2. $setSubmitted(); - error $element.$setSubmitted is not a function

Any suggestions?

Thanks

[MarkPieszak]

Very nice, you're totally right button by default has type="submit" so we definitely need to be using .getAttribute('type') I'll have to update the Repo.

I'll have to look into the other issue, you might just need to set some other type of variable to temporarily let everything know it was "submitted".

It might have something to do with the fact that there's a ng-repeat creating all these ng-forms in your example too. I'm playing with it now.

[moshfeu]

Finally I got this!

I added $scope[$attrs.ngForm].$submitted = true; in the submit function and it's works.

I sent a Pull Request. Tell me if it's OK.

Thanks!

[MarkPieszak]

We are all set :) @moshfeu Thanks for the PR.
Updated the repo : https://github.com/MarkPieszak/ngForm-handle-Enter-Keypress

[molerat619]

Thank you. The PR works for me.