Question

我有一个外部表单，一旦提交将，将用户发送到下一步。内部表单是为嵌套在外部表单中的表提交搜索请求。目前我的解决方案没有触发两种形式中的任何一种。

<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

你不能在HTML上嵌套表单，但angular确实能够嵌套它们。要实现相同的功能，您需要使用ng-form指令。

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

Demo Fiddle

ng-submit directive work only with form元素，因此您需要为外部表单指定form标记，因为您需要ng-submit。

Answer 2

表单永远不应该嵌套，你在应用程序中实际使用Angular吗？如果是这样，请你提供一个你想要实现的目标。

Answer 3

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

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

我modified the example plunker angular docs on ngSubmit向您展示我的意思。

AngularJS嵌套froms，提交按钮不起作用

3 个答案: