Question

考虑以下形式：

<form>
  <div>
    <label>Status: </label>
    <button ng-repeat="status in statuses"
            class="btn btn-default"
            ng-model="job.status.id" btn-radio="status.id">
      {{ status.name }}
    </button>
  </div>
  <div>
    <label>Name: </label>
    <input type="text" ng-model="job.name">
  </div>
</form>

当焦点位于名称字段上，并且 Enter 被命中时，由于某种原因，Status被设置为“All Good”。 Live Demo

为什么会这样？我怎么能阻止这种副作用？

Answer 1

来自ngForm docs：

这是因为HTML中的以下表单提交规则   规格：

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

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

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

button元素的默认类型是“提交”（<button></button> === <button type="submit"></button>）。因此，当您按Enter键时，将提交第一个按钮。

要解决问题，只需将type="button"放在按钮上即可。

<button 
  ng-repeat="status in statuses"
  class="btn btn-default"
  ng-model="job.status.id" 
  btn-radio="status.id"
  type="button"
>
  {{ status.name }}
</button>

为什么在AngularJS表单的文本输入中按Enter键会导致副作用？

1 个答案: