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键时，将调用外部表单提交操作。我期待它调用内部表单提交操作 我是否错了，如果是，为什么？以及如何实现预期的行为

以下是角度doc（https://docs.angularjs.org/api/ng/directive/form）：

如果表单只有一个输入字段，则点击此字段中的输入触发表单提交（ngSubmit）



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



如果表单有一个或多个输入字段和一个或多个按钮或输入[type = submit]，那么点击输入任何输入字段将   触发第一个按钮上的click处理程序或输入[type = submit]   （ngClick）和封闭表单上的提交处理程序（ngSubmit）

Answer 1

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

要拥有嵌套表单，您需要将所有内部表单替换为ng-form，而那些转换为ng-form的表单将不再支持ng-submit事件。您应该在按钮＆amp;的ng-click上添加这些表单方法。还可以从type="submit" from type = button＆＃34;＆＃34;`

更改输入类型

<强>标记

<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

使用angularJs

1 个答案: