6

I currently have an Angular 2 app where the user can submit a form to create a new item. When the submit button is clicked, it calls a function that sends the data to the server and navigates to a new page when the server confirms that the data has been saved successfully.

My problem comes because the form submission appends the form parameters to the URL. So for example if I had an input named title and submission took me to the route mytitle which is the input for the title field, Angular (or whatever injects the GET parameters) would try to navigate to mysite.com/mytitle?title=mytitle instead of just mysite.com/mytitle. Even adding [ngModelOptions]="{standalone: true}" to all of my inputs still leaves a question mark with no parameters after it.

This is a problem because it causes Angular to reload the app because the given route does not match any routes in my route definitions. Is there a way to disable the GET parameters being injected into the URL entirely? POST doesn't work either because I have nowhere to post to, and my next URL uses data from the form itself.

Sawyer Knoblich
  • 438
  • 7
  • 15

2 Answers2

4

I found an answer to my question, the "Submit" button defaulted to being of type "submit", so changing it to type "button" removed the GET parameters injection behavior.

Sawyer Knoblich
  • 438
  • 7
  • 15
  • 1
    The parameters are added to the URL query string by the client web browser when submitting the HTML form using an HTTP `GET` request (the default) instead of a `POST` request. If you don't want the parameters to appear in the URL, you need to set the form's `method` attribute to `"post"`, and make sure the URL you are submitting the form to is expecting the form values via `POST` instead of `GET`. This is simply how HTTP-based HTML form submissions work in general, this is not specific to Angular. – Remy Lebeau Aug 01 '16 at 23:29
0

Check setValue in your form control. Example: Set value this way this.form.controls['val'].setValue='' rather than assigning an empty value (i.e. this.form.controls['val'] == 0).

If your problem still exists, kindly add button type submit to the button and manually give the click function access to it.

ahuemmer
  • 1,653
  • 9
  • 22
  • 29
Nivi
  • 1
  • 1