使用angularJs中的嵌套表单进行表单提交行为

Form submit behavior with nested forms in angularJs

本文关键字：表单提交 表单 嵌套 angularJs 使用      更新时间：2023-09-26
<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里有一个棱角分明的form.当我选择内部字段并按回车键时，将调用外部表单提交操作。我希望它调用内部表单提交操作我期待错了吗，如果是，为什么？ 以及如何实现预期的行为

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

  • 如果表单只有一个输入字段，则在此字段中按回车键会触发表单提交 （ngSubmit）

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

  • 如果表单有一个或多个输入字段和一个或多个按钮或输入[类型=提交]，则在任何输入字段中按回车键将 在第一个按钮或输入上触发单击处理程序[类型=提交] （ngClick） 和封闭表单上的提交处理程序 （ngSubmit）

根据 HTML 标准，嵌套form是不允许的，但您可以使用 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>

普伦克尔在这里

相关文章：