javascript - 为什么 Angular 表单会重新加载页面？

Question

我在同一页面上有以下表格：

<form ng-submit="actionA()">
    <input type="text">
    <input type="submit" value="Submit">
</form>

<form ng-submit="actionB()">
    <input type="text">
    <input type="submit" value="Submit">
</form>

目前，当我提交任一表单时，页面会重新加载。我该如何防止呢？我知道我可以使用 event.preventDefault() 但我想知道是否有一个简单的 Angular 解决方案。

Answer 1

确保从包含组件的模块中的@angular/forms导入FormsModule ，因为没有它，您提交的表单将不断刷新页面并静默失败，而不会将任何内容记录到控制台。

Answer 2

根据 Angular 的文档，它不应该重新加载页面

由于表单在客户端 Angular 应用程序中的作用不同于传统的往返应用程序，因此浏览器最好不要将表单提交转换为将数据发送到服务器的完整页面重新加载。相反，应该触发一些 javascript 逻辑来以特定于应用程序的方式处理表单提交。

出于这个原因，Angular 会阻止默认操作（向服务器提交表单），除非元素具有指定的操作属性。

这是他们给出的不重新加载的示例。

我感觉您的 Angular 应用程序没有引导或绑定没有绑定。

Answer 3

这阻止了我的页面重新加载

<button  mat-raised-button color="accent" type="button" (click)="addFabric(formTemplate.value)">submit</button>