Angular submit form inside form?

Question

I wanna send a form inside a form, but when I submit the form-inside-the-form, all the forms are submitted now. Is it even 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>

Answer 1

Can you have nested forms? Simply no, Nested form won't work.

Docs Says

In Angular, forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However, browsers do not allow nesting of elements, so Angular provides the ngForm directive which behaves identically to 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, that will call the parent ng-submit method on click of any inner form.

Example Plunkr

Workaround for this would be don't use ng-submit directive for the inner nested from. You should use ng-click on button and change type of button to button from 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>

Workaround Plunkr