CODEWITHSUNDEEP
formsangularangular2-forms
Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Angular 2 new form, on submit redirecting to same page with form fields appended in URL as query params with new Router version

I was updating my old running application to newer angular version. It was working good with older version.

On one of my page, I have used form, so when I updated angular/forms to 0.2.0 version with component router version 3.0.0-beta.1. The issue I'm facing is when I tried to submit form, it redirects to same page and appending all the entered value in query parameter.

Here is Plunkr with Problem statement

Steps to reproduce issue:

  1. You will get landed on "CRISIS CENTER" page, select any record from it.
  2. Edit some text, and then click on submit button & check the URL in navigation bar.

Note

  1. I'm using template driven form(I don't think so this will make any difference).
  2. Open Plunkr in Preview window(new tab where you can see running application URL)

Upvotes: 2

Views: 4056

Answers (1)

Scrimothy
Scrimothy

Reputation: 2536

I had the same issue, but it wasn't happening on every route, which was frustrating to debug.

I ended up adding a preventDefault on the normal form submit and found out that there was an error on my page upon running through my ngSubmit method. Once I fixed that error, I was able to remove the preventDefault and it worked the way it's supposed to (without appending the query params).

html

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

ts

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

Upvotes: 3

Related Questions