angularjs – 表单内的Angular提交表单？

发布时间：2020-12-17 08:21:33 所属栏目：安全来源：网络整理

导读：我想在表单中发送一个表单,但是当我提交表单内部的表单时,所有表单都会立即提交. 甚至可以这样做吗？ form name="add_foobar_form" novalidate ng-submit="addFoobar(foobar)" form name="send_contact_form" novalidate ng-submit="sendContact(hello)" inp

我想在表单中发送一个表单,但是当我提交表单内部的表单时,所有表单都会立即提交.
甚至可以这样做吗？

<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>

Can you have nested forms?根本没有,嵌套表格不起作用.

07001

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指令进行内部嵌套.您应该使用ng-click按钮并从提交更改按钮类型到按钮.

标记

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!