In Angular 4, how do you convert a FormGroup into a URL with query parameters?

Question

In my Angular app, I have a multifield Reactive Form which users can use to search our internal database.

When the user clicks "Search" I want to route to a SearchResultsComponent to display the results. I also want the route in the browser to contain query parameters that represent the form input, so the user can copy it somewhere and re-use it easily. Essentially, as I imagine it, visiting https://carsuniverse.com/?make=Honda&model=Civic&year=2009 should activate the SearchResultsComponent which in turn calls a service that performs the search, returns it to the component and displays it on the page

What is the best (or a good way at least) to do this in Angular?

Answer 1

Try this:

const params = new URLSearchParams();
const formValue = this.form.value; // this.form should be a FormGroup

for (const key in formValue) {
    params.append(key, formValue[key]);
}

We grab the object that is the form value, and for each key we append the value to a URLSearchParams object, which can then be passed to the Http library when making requests.

You may want to think about the implications of this if the form is deeply nested.

UPDATE

If you want deeply nested forms to be represented in the query params, you'll have to modify the for loop slightly. But here is an example of how your query might look for deeply nested objects:

{
    name: 'John',
    favorites: {
        food: 'Pizza',
        candy: 'Jolly Ranchers'
    }
}

The object above could be represented like this:

?name=John&favorites[food]=Pizza&favorites[candy]=Jolly+Ranc‌​hers