angularJs中嵌套表单的表单提交行为

Question

<form name="v" ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter OUTER FORM:
  <input type="text" ng-model="text" name="texta" />
  <input type="submit" id="submit" value="Submit" />
  <pre>list={{list}}</pre>

  <form name="x" ng-submit="submitInner()">
    Enter text and hit enter INNER FORM:
    <input type="text" ng-model="textInner" name="text" />
    <input type="submit" id="submits" value="Submit" />
    <pre>lists={{listInner}}</pre>        
  </form>
</form>

示例：Plnkr

我在form 中有一个角度form。当我选择内部字段并按 Enter 键时，将调用外部表单提交操作。 我期待它调用内部表单提交操作 我期待错了吗，如果是，为什么？以及如何实现预期的行为

以下来自角度文档（https://docs.angularjs.org/api/ng/directive/form）：

• 如果表单只有一个输入字段，则在此字段中按 Enter 会触发表单提交 (ngSubmit)

• 如果表单有 2 个以上的输入字段且没有按钮或输入[type=submit]，则按 Enter 不会触发提交

• 如果表单有一个或多个输入字段和一个或多个按钮或 input[type=submit]，则在任何输入字段中按 enter 将 在第一个按钮或 input[type=submit] 上触发点击处理程序 (ngClick) 和封闭表单上的提交处理程序 (ngSubmit)

Answer 1

根据 HTML 标准不允许嵌套 forms，但您可以使用 ng-form 指令而不是 form 元素使其工作。

对于嵌套表单，您需要用ng-form 替换所有内部表单，并且那些被转换为ng-form 的表单将不再支持ng-submit 事件。您应该在按钮的ng-click 上添加这些表单方法，并将输入类型从type="submit" 更改为type=button""。

标记

<form name="v" ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter OUTER FORM:
  <input type="text" ng-model="text" name="texta" />
  <input type="submit" id="submit" value="Submit" />
  <pre>list={{list}}</pre>

  <ng-form name="x">
    Enter text and hit enter INNER FORM:
    <input type="text" ng-model="textInner" name="text" />
    <input type="button" id="submits" value="Submit" ng-click="submitInner()"/>
    <pre>lists={{listInner}}</pre>
  </ng-form>

</form>

Plunkr Here