Nested forms in AngularJS

Question

You can find a Plunker demonstrating the Problem here: Plunker

I want to use nested forms in AngularJS. To do that it seems like ng-form is the way to go and i tried the following:

<form novalidate ng-submit="ctrl.form1()">
    <button type=submit>Form1</button>
    <ng-form novalidate ng-submit="ctrl.form2()">
        <button type=submit>Form2</button>  
    </ng-form>
</form>

While I expected the inner submit to execute the submit-action of the inner form, instead the method form1() is called everytime when i click either button.

Why does it behave like this and how can i achieve the expected result?

Varit J Patel · Accepted Answer · 2016-06-28 07:53:44Z

1

You can use one of the following two ways to specify what javascript method should be called when a form is submitted: * ngSubmit directive on the form element * ngClick directive on the first button or input field of type submit (input[type=submit])

Visit Angular Forms

    <form novalidate>
        <button type=submit ng-click="ctrl.form1()">Form1</button>
            <ng-form novalidate >
               <button type=submit ng-click="ctrl.form2()">Form2</button>  
            </ng-form>
    </form>

see working plunker here

answered Jun 28, 2016 at 7:53

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Nested forms in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related