Почему нажатие Enter в текстовом вводе формы AngularJS вызывает побочный эффект?

Live Demo

Рассмотрим следующий вид:

<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 попадает, по умолчанию по умолчанию установлено значение "Все хорошо". Live Demo

Почему это происходит? Как я могу остановить этот побочный эффект?

Ответы

Ответ 1

Из документов ngForm:

Это из-за следующих правил представления формы в HTML спецификация:

Если форма имеет только одно поле ввода, то нажатие введите в это поле triggers form submit (ngSubmit)

если форма имеет 2+ поля ввода и никаких кнопок или ввода [type = submit] то нажатие кнопки не запускает submit

если форма имеет одно или несколько полей ввода и одну или несколько кнопок или введите [type = submit], затем нажмите enter в любом из полей ввода вызовет обработчик кликов на первой кнопке или input [type = submit] (ngClick) и обработчик отправки на прилагаемом form (ngSubmit)

Тип по умолчанию для элемента button - "submit" (<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>