为什么Angular表单要重新加载页面?

Why is Angular form reloading the page?

本文关键字：加载 表单 Angular 新加载 为什么      更新时间：2023-09-26

在同一页面上，我有以下表单:

<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解决方案。

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

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

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

因此，Angular会阻止默认操作(表单提交到服务器)，除非元素指定了action属性。

这是他们给出的不重载的例子

我有一种感觉，你的angular应用程序没有被引导，或者没有绑定。

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

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

相关文章：