ng-submit doesn't work with ng-form

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

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

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!

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.

feat(ngForm): add ngSubmit support

+1 I'm seeing this in 1.2.0.

Confirmed, this is happening in 1.2.2.

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

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

+1

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.

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

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.

@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" :)

@e-oz

@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 :)

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

@moshfeu

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

ngForm fix demo

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:

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

Any suggestions?

Thanks

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.

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!

@moshfeu

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

Thank you. The PR works for me.

Navigation Menu

Repository navigation

ng-submit doesn't work with ng-form #2513

23 remaining items

Directive fix (no jQuery or any other dependencies):

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

ngSubmit functionality fix for ngForm:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ng-submit doesn't work with ng-form #2513

Description

Activity

btford commented on Aug 24, 2013

nelsonpecora commented on Oct 21, 2013

jdrake commented on Nov 11, 2013

nelsonpecora commented on Nov 27, 2013

Narretz commented on Nov 28, 2013

mdedetrich commented on Jan 27, 2014

23 remaining items

LeleDev commented on Sep 16, 2015

fferraris commented on Sep 16, 2015

itslikegood commented on Sep 22, 2015

filipesilva commented on Sep 22, 2015

e-oz commented on Sep 29, 2015

MarkPieszak commented on Oct 22, 2015

Directive fix (no jQuery or any other dependencies):

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

ngSubmit functionality fix for ngForm:

e-oz commented on Oct 22, 2015

MarkPieszak commented on Oct 22, 2015

moshfeu commented on Mar 30, 2016

MarkPieszak commented on Mar 30, 2016

moshfeu commented on Mar 30, 2016

MarkPieszak commented on Mar 30, 2016

moshfeu commented on Mar 31, 2016

MarkPieszak commented on Mar 31, 2016

molerat619 commented on Sep 7, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions