FR: Sync query params with initial form value

[Ross Lavery]

I'm submitting a...

[x] Feature request

Current behavior

Imagine we build a FormGroup that controls a "dashboard filter" with some default values: { userId: currentUser.id, role: 'manager' }.

Currently, upon load of a given component and running .connect() to wire up the QueryParamsManager, the FormGroup is synced with any queryparams currently present in the URL (in this case, none).

Now imagine a user wants to share their "dashboard" with another user without having made any form changes.

The user that receives the shared URL and opens it will instead see their own dashboard rather than the one of the user that shared it with them.

Expected behavior

On .connect() I would expect (or would love an option) to not only sync uni-directionally from URL -> FormGroup, but bi-directionally to allow any default form values to sync FormGroup -> URL.

Environment

Angular version: 11.2


Browser:
- [x] Chrome (desktop) version 90

[Netanel Basal]

I'm not sure I understand the use case. Can you explain with a simple code example, please?

[Kuba]

@NetanelBasal
When creating form with initial values query params doesn't change:

this.form = this.fb.group({
      param1: ['initial1'],
      param2: ['initial2'],
      param3: [''],
    });
    
this.factory
  .create([{ queryKey: 'param1' }, { queryKey: 'param2' },  { queryKey: 'param3' }])
  .connect(this.form);

Initially, without further value changes, the url won't have any query params (https://domain.com)

It would be great if we had an option to sync initial params, so for the above code the url would look like https://domain.com?param1=initial1&param2=initial2

[Netanel Basal]

@grudus do you want to create a PR?