Угловая перезапуск приложения при нажатии кнопки в Microsoft Edge

Question

Я некоторое время работал над приложением Angular и использую Chrome во время разработки. На прошлой неделе, проводя тестирование с Microsoft Edge, я обнаружил, что приложение перезагружается при нажатии кнопки внутри формы. Это было не поведение в Chrome. Непосредственным решением было добавить атрибут type = ”button” к кнопке, чтобы предотвратить отправку формы.

Выполняя еще какое-то тестирование, я подтвердил, что простая кнопка внутри формы (без угла) заставит форму отправляться при нажатии кнопки в Chrome и Edge. Если я делаю то же самое в новом проекте Angular CLI, я вижу то же самое поведение. Когда я добавляю FormsModule, поведение меняется, и нажатие кнопки не отправляет ни в Chrome, ни в Edge. Когда я говорю «отправить», я имею в виду HTTP GET для страницы.

Мне не удалось создать короткое воспроизведение случая, когда кнопка отправляется в Edge, но не в Chrome.

Мой вопрос: кто-нибудь может объяснить некоторые из предметов, которые здесь играют?

Answer 1

Кнопки классифицируются как контент, связанный с формой.Они являются частью спецификации HTML элементов, которые ведут себя внутри тега <form>.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form-associated_content

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Notes

Как только я добавляю FormsModule, поведение меняется, и нажатие кнопки не выполняет ни Chrome, ни Edge.

Это отправка, но все теги <form> перехватываются FormDirective, который переопределяет поведение отправки по умолчанию для запуска (ngSubmit) событий в элементе формы.

Селекторы длядиректива:

form:not([ngNoForm]):not([formGroup])
ngForm
ng-form
[ngForm]

https://angular.io/api/forms/NgForm

Документация указывается в описании формы

Как только вы импортируете FormsModule, эта директива становится активнойпо умолчанию для всех тегов.Вам не нужно добавлять специальный селектор.

Эта директива принимает события для отправки

Если необходимо, прослушайте событие директивы ngSubmit, чтобы получить уведомление, когдаПользователь запустил отправку формы.Событие ngSubmit генерирует исходное событие отправки формы.