AngularJS nested froms, submit button not working

Question

I have an outer form that once submitted will, send the user to the next step. The inner form is submitting search requests for a table that is nested in the outer form. At the moment my solution is not triggering either of the two forms.

<form id="outerForm" onsubmit="submitOuter()">
    <form id="innerForm" onsubmit="submitInner()">
        <button type="submit" form="innerForm">Search</button>
    </form>

    <button type="submit" form="outerForm">Next Step</button>
</form>

jsfiddle here

PS my example is obviously not using AngularJS, the difference is that my forms have data-ng-submit.

Answer 1

You could not have nested form on HTML, but angular does provide the ability to have them nested. For implementing the same thing you need to use ng-form directive.

Outer form will have ng-submit event, but the inner form would have ng-click event with button type="button", if you won't change the button type then it will call the parent form ng-submit method.

Demo Fiddle

ng-submit directive work only with form element, so you need to specify form tag for outer form, since you want ng-submit there.

Answer 2

Forms should never be nested, are you actually using Angular in your application? If so, could you please provide a Punker of what you are trying to achieve.

Answer 3

It is not valid to nest form elements, see this question.

I suggest you use ng-click on a type="button" input in the inner part of your form, which handles the search, and ng-submit for the outer one.

I have modified the example plunker of the angular docs on ngSubmit to show you what i mean.