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

在 Angular 中，表单可以嵌套。这意味着外部形式是 当所有子表单也有效时有效。但是，浏览器 不允许嵌套元素，所以 Angular 提供了 ngForm 指令的行为相同但可以是 嵌套。这允许您拥有嵌套的表单，这非常有用 在动态表单中使用 Angular 验证指令时 使用 ngRepeat 指令生成

但不幸的是，您不能使用ng-submit 表单，它会在单击任何内部表单时调用父级ng-submit 方法。

Example Plunkr

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

标记

<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