AngularJS 嵌套的来源，提交按钮不起作用

Question

我有一个外部表单，一旦提交，用户就会进入下一步。内部表单正在提交对嵌套在外部表单中的 table 的搜索请求。目前我的解决方案没有触发这两种形式中的任何一种。

<form id="outerForm" onsubmit="submitOuter()">
    <form id="innerForm" onsubmit="submitInner()">
        <button type="submit" form="innerForm">Search</button>
    </form>

    <button type="submit" form="outerForm">Next Step</button>
</form>

jsfiddle here

PS我的例子明显没有用AngularJS，不同的是我的表格有data-ng-submit.

Answer 1

永远不要嵌套表单，您是否真的在应用程序中使用了 Angular？如果是这样，您能否提供一个 Punker 来说明您要实现的目标。

Answer 2

嵌套表单元素无效，参见this question。

我建议您在表单内部的 type="button" 输入上使用 ng-click，它处理搜索，在外部输入 ng-submit。

我要 modified the example plunker of the angular docs on ngSubmit 告诉你我的意思。

Answer 3

您无法在 HTML 上嵌套表单，但 angular 确实提供了嵌套它们的功能。为了实现同样的事情，你需要使用 ng-form 指令。

外部表单将有 ng-submit 事件，但内部表单将有 ng-click 带有按钮 type="button" 的事件，如果您不更改按钮类型，那么它将调用父表单 ng-submit 方法。

Demo Fiddle

ng-submit directive work only with form element, so you need to specify form tag for outer form, since you want ng-submit there.

AngularJS 嵌套的来源，提交按钮不起作用

AngularJS nested froms, submit button not working

html

forms

angularjs

angularjs-forms