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

【问题标题】：Angular application restarting when clicking button in Microsoft Edge单击 Microsoft Edge 中的按钮时 Angular 应用程序重新启动
【发布时间】：2019-04-15 23:42:52
【问题描述】：

我一直在开发一个 Angular 应用程序，并且在开发过程中一直在使用 Chrome。上周在使用 Microsoft Edge 进行一些测试时，我发现当按下表单内的按钮时，应用程序正在重新加载。这不是 Chrome 中的行为。直接的解决方案是为按钮添加 type=”button” 属性以防止表单提交。

在进行更多测试时，我确认在 Chrome 和 Edge 中按下按钮时，表单内的简单按钮（无 Angular）将导致表单提交。如果我在一个新的 Angular CLI 项目中做同样的事情，我会看到同样的行为。添加 FormsModule 后，行为会发生变化，并且按下按钮不会在 Chrome 或 Edge 上提交。当我说“提交”时，我指的是页面的 HTTP GET。

我无法对按钮提交到 Edge 而不是 Chrome 的案例进行简短复制。

我的问题是，任何人都可以在这里解释其中的一些项目吗？

【问题讨论】：

表单内的按钮大部分时间都隐式设置为type="submit"。确保将所有按钮明确设置为type="button"，真正的提交按钮除外。还要确保您的表单订阅了(ngSubmit) 事件处理程序，而不是(submit)。

标签： angular forms

【解决方案1】：

按钮被归类为与表单相关的内容。它们是在 <form> 标记内具有行为的元素的 HTML 规范的一部分。

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 事件发出原始表单提交事件。

【讨论】：