单击Microsoft Edge中的按钮时，Angular应用程序将重新启动

Question

我已经在Angular应用程序上工作了一段时间，并且在开发过程中一直在使用Chrome。上周，在使用Microsoft Edge进行测试时，我发现按下窗体内的按钮时正在重新加载应用程序。这不是Chrome中的行为。紧急解决方案是在按钮上添加type =“ button”属性，以防止表单提交。

在进行更多测试时，我确认了在Chrome和Edge中同时按下表单内的简单按钮（无Angular）会导致表单提交。如果在新的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标签，该标签覆盖了默认的提交行为，以触发form元素上的(ngSubmit)事件。

指令的选择器是：

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

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

文档以表格说明的形式声明

  

一旦导入FormsModule，默认情况下，此指令在所有标签上都变为活动状态。您无需添加特殊的选择器。

此指令接管要提交的事件

  

如有必要，请在用户触发表单提交时侦听指令的ngSubmit事件，以通知该事件。 ngSubmit事件发出原始表单提交事件。