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

<button> элементы кажутся типа по умолчанию submit если оно вынесено через Chrome. Не то, что я ожидал интуитивно.

В статье W4Schools.com говорится верхушку:

Всегда указать тип атрибута для элемента. Различные браузеры могут использовать разные типы по умолчанию для элемента.

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>