Angular 2新表单，提交重定向到同一页面，表单字段附加在URL中作为查询参数，新路由器版本

Posted 2023-03-13

【中文标题】Angular 2新表单，提交重定向到同一页面，表单字段附加在URL中作为查询参数，新路由器版本

【英文标题】：Angular 2 new form, on submit redirecting to same page with form fields appended in URL as query params with new Router version

【发布时间】：2016-11-12 00:10:27

【问题描述】：

我正在将我正在运行的旧应用程序更新为更新的 Angular 版本。它在旧版本上运行良好。

在我的一个页面上，我使用了表单，所以当我使用组件路由器版本3.0.0-beta.1 将angular/forms 更新为0.2.0 版本时。我面临的问题是当我尝试提交表单时，它会重定向到同一页面并将所有输入的值附加到查询参数中。

这里是Plunkr 问题陈述

重现问题的步骤：

您将登陆“CRISIS CENTER”页面，从中选择任何记录。 编辑一些文本，然后单击提交按钮并检查导航栏中的 URL。

注意

我正在使用模板驱动的表单（我认为这不会有什么不同）。 在预览窗口中打开 Plunkr（新标签页，您可以在其中看到正在运行的应用程序 URL）

【参考方案1】：

我遇到了同样的问题，但并非每条路线都发生这种情况，这让调试感到沮丧。

我最终在普通表单submit 上添加了一个preventDefault，并发现在运行我的ngSubmit 方法时我的页面上有一个错误。修复该错误后，我就能够删除 preventDefault 并且它按照预期的方式工作（不附加查询参数）。

html

<form (ngSubmit)="submitForm()" (submit)="preventDefault($event)">...</form>

ts

public preventDefault(event: Event): void 
  event.preventDefault();

【讨论】：

感谢您的回复，我喜欢您的想法，最好创建一个指令，在表单提交事件中为我们执行 preventDefault .. 但理想情况下它不应该发生