Javascript angularJs中嵌套表单的表单提交行为 输入文本并点击输入外部形式： list={{list} 输入文本并点击“输入内部表单”： 列表={{listInner}}

例如：

我有一张有角度的

表格

在

表格

内。当我选择内部字段并按enter键时，将调用外部表单提交操作。 我希望它调用内部表单提交操作 我的预期是否错误，如果是，为什么？以及如何实现预期行为

以下是angular doc（）中的内容：

• 如果表单只有一个输入字段，则在该字段中按enter键将触发表单提交（ngSubmit）

• 如果表单有2+个输入字段，并且没有按钮或输入[type=submit]，则按enter键不会触发submit

• 如果表单有一个或多个输入字段和一个或多个按钮或输入[type=submit]，则在任何输入字段中按enter键都会 在第一个按钮或输入[type=submit]上触发click处理程序 （ngClick）和随附表单上的提交处理程序（ngSubmit）

---

根据HTML标准，嵌套的

表单

s是不允许的，但是您可以使用

ng form

指令而不是

form

元素使其工作

对于嵌套表单，您需要将所有内部表单替换为

ng表单

，而那些被转换到

ng表单

的表单将不再支持

ng submit

事件。您应该在按钮的

ng单击
，添加这些表单方法，并将输入类型从
type=“submit”
更改为
type=button”“

标记


输入文本并点击输入外部形式：
list={{list}
输入文本并点击“输入内部表单”：
列表={{listInner}}

@mplungjan angularJs allow nested forms我仍然会避免名称/id/functionname=“submit”仍然不起作用，而您共享的plunkr也不起作用，因为“在内部输入字段中键入某个内容并按enter键…它仍然提交外部表单”@user2410148您可以在enter键上获得外部表单，因为它有
ng submit
事件..内部表单没有使用
ng submit
，所以它们不会像以前那样工作
type=“button”
@user2410148 ng submit事件只有在使用
表单
元素本身时才可用。@Pankaj，如果在外部表单或内部表单上添加所需的验证，则不会生效。如何分别在内部和外部窗体上检查$error。普朗克：
<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>

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