angularjs - Angular 在表单内提交表单？

Question

我想在表单内发送一个表单，但是当我提交表单内的表单时，所有表单现在都已提交。
甚至有可能做到这一点吗？

<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?根本不，嵌套表单不起作用。

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

但不幸的是你不能使用 ng-submit表单，这将调用父 ng-submit单击任何内部表单的方法。

Example Plunkr

解决方法是不要使用 ng-submit内部嵌套 from 的指令。您应该使用 ng-click在按钮上并将按钮类型更改为 button来自 submit .

标记

<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