AngularJS：表单中的第一个按钮在按下输入按钮时触发，即使它不是提交按钮

Question

如果我在编辑 input_a 后按回车键，将调用 processInputA()。 submit() 函数省略。

input_b 不会发生这种情况：它按预期工作，即使它类似于 input_a。 submit() 函数按预期调用。

如何防止 input_a 之后的按钮触发？

<form class="uk-form" ng-submit="submit()">
  <div class="uk-form-row">
    <input type="text"
           name="input_a"
           ng-model="buffer.inputA" ng-change="reportInputATyped()"
           class="uk-width-3-10 uk-form-small">
    <button ng-cloak ng-show="inputADirty" class="uk-button uk-button-small" ng-click="processInputA()">Apply</button>
    /
    <input type="text"
           name="input_b"
           ng-model="buffer.inputB" ng-change="reportInputBTyped()"
           class="uk-width-6-10 uk-form-small">
    <button ng-cloak ng-show="inputBDirty" class="uk-button uk-button-small" ng-click="processInputB()">Apply</button>
  </div>
  // ...further inputs...
</form>

AngularJS: http://angular-meteor.com

样式：http://getuikit.com

Answer 1

如果通过 Chrome 渲染，

<button> 元素似乎是默认类型 submit。不是我直觉上预期的那样。

W4Schools.com 文章指出提示：

Always specify the type attribute for the element. Different browsers may use different default types for the element.

http://www.w3schools.com/tags/att_button_type.asp

如果由 Chrome 处理则有效的版本：

<form class="uk-form" ng-submit="submit()">
  <div class="uk-form-row">
    <input type="text"
           name="input_a"
           ng-model="buffer.inputA" ng-change="reportInputATyped()"
           class="uk-width-3-10 uk-form-small">
    <button type="button" ng-cloak ng-show="inputADirty" class="uk-button uk-button-small" ng-click="processInputA()">Apply</button>
    /
    <input type="text"
           name="input_b"
           ng-model="buffer.inputB" ng-change="reportInputBTyped()"
           class="uk-width-6-10 uk-form-small">
    <button type="button" ng-cloak ng-show="inputBDirty" class="uk-button uk-button-small" ng-click="processInputB()">Apply</button>
  </div>
  // ...further inputs...
</form>

AngularJS：表单中的第一个按钮在按下输入按钮时触发，即使它不是提交按钮

AngularJS: First button in form fires on enter button press even though it is not a submit button

angularjs

getuikit

angular-meteor