Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
<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)

share|improve this question
    
@mplungjan angularJs allow nested forms – user2410148 20 hours ago
    
I would still avoid the name/id/functionname="submit" – mplungjan 20 hours ago

Nested form 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" fromtype=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

share|improve this answer
    
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" – user2410148 19 hours 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 19 hours ago
1  
@user2410148 ng-submit event will only available if you are using form element itself. – Pankaj Parkar 19 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.