Angular.js: ngSubmit запускает отправку формы на любой кнопке без type = "button"

Созданный на 28 янв. 2014 · 13Комментарии · Источник: angular/angular.js

Я только что столкнулся с проблемой, когда angular дважды отправлял мою форму.

        <div class="text-center">
          <input type="submit" class="btn btn-primary" value="Create" />
          <button class="btn btn-primary" ng-click="close()">Close</button>
        </div>

Обе кнопки здесь отправляют форму, что приводит к двойной отправке. Я понимаю, что проблема связана с отправкой формы angular на любую кнопку, кроме type = "button". Добавление этого атрибута к кнопке закрытия исправляет это. Я не знаю, задумано ли это, но это сбивало меня с толку, пока я не понял этого, поэтому решил привлечь к этому внимание.

forms low inconvenient

Источник

parliament718

👍21

Самый полезный комментарий

Я просто потратил на это часы ...

ng-submit должен запускаться только для кнопок с явно установленным type = "submit".

soichih 31 июл. 2014

👍81 👎6 ❤5

Все 13 Комментарий

Я думаю, что это разъясняется в документации, хотя не упоминается, что вы можете предотвратить отправку с помощью puttint type = "button":

если в форме есть одно или несколько полей ввода и одна или несколько кнопок или input [type = submit], то нажатие клавиши Enter в любом из полей ввода вызовет обработчик щелчка на первой кнопке или input type = submit и обработчик отправки на закрывающая форма (ngSubmit)

Narretz 28 янв. 2014

👍43 ❤8 🎉4 👀1

Я просто потратил на это часы ...

ng-submit должен запускаться только для кнопок с явно установленным type = "submit".

soichih 31 июл. 2014

👍81 👎6 ❤5

это .... не как работает html?

caitp 31 июл. 2014

👍12

О, так HTML-форма по умолчанию обрабатывает любую кнопку как кнопку отправки ... ничего общего с Angular (а Angular использует событие отправки формы для запуска ng-submit - что имеет смысл). Интересно, почему тогда должен существовать type = "submit"?

В любом случае .. Я обязательно добавлю type = "button" на все кнопки, если это не кнопка отправки.

soichih 31 июл. 2014

👍23 😄3

@soichih - да, ты прав. ngSubmit просто реагирует на событие отправки, и браузер отвечает за его запуск.

На самом деле существует несколько сценариев, когда это может произойти.

Чтобы предотвратить двойное выполнение обработчика, используйте только одну из директив ngSubmit или ngClick. Это связано со следующими правилами отправки формы в спецификации HTML:
Если форма имеет только одно поле ввода, нажатие клавиши ввода в этом поле запускает отправку формы (ngSubmit)
если в форме есть 2+ поля ввода и нет кнопок или input [type = submit], то нажатие Enter не вызывает отправки
если в форме есть одно или несколько полей ввода и одна или несколько кнопок или input [type = submit], то нажатие клавиши Enter в любом из полей ввода вызовет обработчик щелчка на первой кнопке или input type = submit и обработчик отправки на закрывающая форма (ngSubmit)

Это задокументировано здесь: https://docs.angularjs.org/api/ng/directive/form
Мы должны либо продублировать, либо более явно указать его в документации ngSubmit.

petebacondarwin 31 июл. 2014

👍4

@petebacondarwin хотите быстро собрать для этого патч?

caitp 31 июл. 2014

Ой, тогда продолжайте :-)

petebacondarwin 31 июл. 2014

Большое спасибо за то, что указали на это! Я, возможно, никогда бы не понял этого в этом посте! Ваше здоровье! - Стив

svanetten1976 20 янв. 2015

👍1

К вашему сведению, это тоже происходит в Ionic3 .... добавление type = "button" ко второй кнопке также решает проблему.

rodneyjoyce 26 апр. 2017

👍9

спасибо soichih

arabindawhiz 30 авг. 2017

Вы должны быть осторожны, потому что, если у вас есть более одной кнопки, даже если вы указали, что одна из них является отправленной, она будет отправлена в любой из них, у которой нет type = "button".