形式内的角度提交表格？

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

你有嵌套表格吗？没有,嵌套表格不起作用.

文件说

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

但遗憾的是,您无法使用该ng-submit表单,它将ng-submit在单击任何内部表单时调用父方法.

示例Plunkr

解决方法是不要使用ng-submit内部嵌套的指令.您应该使用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>

解决方法Plunkr