search

ngneat / bind-query-params

Sync URL Query Params with Angular Form Controls
https://netbasal.com
MIT License
152 stars 12 forks source link

Prevent the change of query params when a form is invalid #8

Open rafaelss95 opened 3 years ago

rafaelss95 commented 3 years ago

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

AFAIK there's no way to prevent the change of query params when a form is invalid.

Expected behavior

I'd like to have an option to prevent the change of query params when a FormGroup is invalid.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-ewwssg-nwxzlt

  1. Select a start date;
  2. Select an end date less than start date;
  3. Check the error + change of the query params.

This use case is with date, but I have other cases where I have a masked input and this is also problematic.

What is the motivation / use case for changing the behavior?

I have two datepicker inputs that represent a range that an user can select. As a business rule, the start date can't be greater than the end date, but as I use updateOn: submit (the filter has a submit button) I don't have a way to do this check before the user submits the form. It would be nice then to have an option to not change the query params until the form is valid.

Environment


Angular version: X.Y.Z
11

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: XX  
- Platform:  

Others:
NetanelBasal commented 3 years ago

Seems reasonable to me. You're welcome to submit a PR.

rafaelss95 commented 3 years ago

Hey, do you have any direction to point up? I mean, where should I add such option?

I was thinking of having an InjectionToken like BIND_QUERY_PARAMS_CONFIG with a config that contains a flag like ignoreInvalidForm, which is false by default (btw, these names are just thoughts), but I don't know if there's a better option. I'll wait your contact before start working on this.

NetanelBasal commented 3 years ago

I think we should allow it in the following cases: