Geek Answers Handbook

Angular submit form inside form?

I want to submit the form inside the form, but when I submit the form inside the form, all forms will be submitted now. Is it possible to do this?

<form name="add_foobar_form" novalidate ng-submit="addFoobar(foobar)"> <form name="send_contact_form" novalidate ng-submit="sendContact(hello)"> <input type="text" ng-model="hello.bye"> <input type="submit" value="sendmall"> </form> <input type="text" ng-model="foobar.go"> <input type="submit" value="sendall"> </form>
+6
source share
1 answer

Can you have nested forms? Just no, the nested form will not work.

Docs say

In Angular, forms can be nested. This means that the outer form is valid when all child forms are also valid. However, browsers do not allow nesting of elements, so Angular provides ngForm, which behaves the same but can be nested. This allows you to have nested forms, which is very useful when using Angular validation directives in forms that are dynamically generated using the ngRepeat directive.

But, unfortunately, you could not use the ng-submit form, which would call the ng-submit parent method when any internal form was clicked.

Plunkr example

The workaround for this will not use the ng-submit directive for the internal nest. You should use the ng-click button on the button and change the button type to button with submit .

Markup

 <form name="add_foobar_form" novalidate ng-submit="addFoobar('foobar')"> <ng-form name="send_contact_form" novalidate> <input type="text" ng-model="hello.bye"> <input type="button" value="sendmall" ng-click="sendContact('hello')"> </ng-form> <input type="text" ng-model="foobar.go"> <input type="submit" value="sendall"> </form>

Plunkr workaround

+13
source

More articles:


All Articles