Form submit behavior with nested forms in angularJs

Question

<form name="v" ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter OUTER FORM:
  <input type="text" ng-model="text" name="texta" />
  <input type="submit" id="submit" value="Submit" />
  <pre>list={{list}}</pre>

  <form name="x" ng-submit="submitInner()">
    Enter text and hit enter INNER FORM:
    <input type="text" ng-model="textInner" name="text" />
    <input type="submit" id="submits" value="Submit" />
    <pre>lists={{listInner}}</pre>        
  </form>
</form>

example : Plnkr

I have an angular form inside a form. When I select inner field and hit enter, the outer form submit action is called. I am expecting it to call the inner form submit action Am I expecting wrong, if yes why? and how to achieve the intended behavior

Below is from angular doc(https://docs.angularjs.org/api/ng/directive/form):

If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)

if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit

if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)

@mplungjan angularJs allow nested forms

Bhuvan
– Bhuvan

2016-01-21 13:08:31 +00:00
Commented Jan 21, 2016 at 13:08 — Bhuvan
– Bhuvan, Commented Jan 21, 2016 at 13:08
I would still avoid the name/id/functionname="submit"

mplungjan
– mplungjan

2016-01-21 13:13:38 +00:00
Commented Jan 21, 2016 at 13:13 — mplungjan
– mplungjan, Commented Jan 21, 2016 at 13:13

svarog · Accepted Answer · 2019-06-23 13:04:15Z

3

Nested forms are not allowed per HTML standards, but you could make it working using ng-form directive instead of form element.

For having nested form you need to replace all the inner form's with ng-form and those form which are trans-piled to ng-form would no longer support ng-submit event. You should add those form method on ng-click of button & also change input type from type="submit" to type=button"".

Markup

<form name="v" ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter OUTER FORM:
  <input type="text" ng-model="text" name="texta" />
  <input type="submit" id="submit" value="Submit" />
  <pre>list={{list}}</pre>

  <ng-form name="x">
    Enter text and hit enter INNER FORM:
    <input type="text" ng-model="textInner" name="text" />
    <input type="button" id="submits" value="Submit" ng-click="submitInner()"/>
    <pre>lists={{listInner}}</pre>
  </ng-form>

</form>

Plunkr Here

edited Jun 23, 2019 at 13:04

svarog

9,8855 gold badges66 silver badges79 bronze badges

answered Jan 21, 2016 at 13:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bhuvan Over a year ago

still doesnt work and plunkr shared by you also doesnt work in term of "type in something in inner input field and hit enter... it still submit the outer form"

Pankaj Parkar Over a year ago

@user2410148 you could get outer form working on enter click, because it has ng-submit event..inner form as not using ng-submit so they will not work as they had type="button"

Pankaj Parkar Over a year ago

@user2410148 ng-submit event will only available if you are using form element itself.

Ramesh Papaganti Over a year ago

@Pankaj, If add required validation on outer form or inner form it's not effecting. How do we check $error on inner and outer form separately. Plunker: plnkr.co/edit/K5fbm3gAFcRDYvGI7EYw?p=preview

Collectives™ on Stack Overflow

Form submit behavior with nested forms in angularJs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related