CODEWITHSUNDEEP
javascriptangularjsforms
H W
H W

Reputation: 2586

Nested forms in AngularJS

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?

Upvotes: 0

Views: 813

Answers (1)

Varit J Patel
Varit J Patel

Reputation: 3520

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

Upvotes: 1

Related Questions