feat: add ignoreInvalidForm config

projects/ngneat/bind-query-params/src/lib/BindQueryParamsManager.ts

@@ -2,7 +2,7 @@ import { FormGroup } from '@angular/forms';
 import { merge, Subject } from 'rxjs';
 import { Router } from '@angular/router';
 import { coerceArray, resolveParams } from './utils';
-import { auditTime, map, takeUntil } from 'rxjs/operators';
+import { auditTime, debounceTime, filter, map, takeUntil } from 'rxjs/operators';
 import { BindQueryParamsOptions, QueryParamParams, ResolveParamsOption } from './types';
 import { QueryParamDef } from './QueryParamDef';
 import set from 'lodash.set';
@@ -31,7 +31,20 @@ export class BindQueryParamsManager<T = any> {
     this.updateControl(this.defs, { emitEvent: true }, (def) => def.strategy === 'twoWay');
 
     const controls = this.defs.map((def) => {
-      return this.group.get(def.path)!.valueChanges.pipe(
+      const control = this.group.get(def.path)!;
+      return control.valueChanges.pipe(
+        debounceTime(0),
+        filter(() => {
+          if (this.options.ignoreInvalidForm) {
+            return this.group.valid;
+          }
+
+          if (def.ignoreInvalidForm) {
+            return control.valid;
+          }
+
+          return true;
+        }),
         map((value) => ({
           def,
           value,

projects/ngneat/bind-query-params/src/lib/QueryParamDef.ts

@@ -4,6 +4,10 @@ import { parse } from './utils';
 export class QueryParamDef<QueryParams = any> {
   constructor(private config: QueryParamParams<QueryParams>) {}
 
+  get ignoreInvalidForm() {
+    return this.config.ignoreInvalidForm;
+  }
+
   get queryKey() {
     return this.config.queryKey;
   }

projects/ngneat/bind-query-params/src/lib/lib.spec.ts

@@ -1,5 +1,5 @@
 import { BIND_QUERY_PARAMS_OPTIONS, BindQueryParamsFactory } from '@ngneat/bind-query-params';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { createComponentFactory, Spectator } from '@ngneat/spectator';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
@@ -29,6 +29,7 @@ function assertRouterCall(spectator: Spectator<HomeComponent>, queryParams: Reco
 }
 
 interface Params {
+  withMinlengthValidator: string;
   searchTerm: string;
   'withBrackets[gte]': string;
   showErrors: boolean;
@@ -46,6 +47,7 @@ interface Params {
 })
 class HomeComponent {
   group = new FormGroup({
+    withMinlengthValidator: new FormControl('', [Validators.minLength(5)]),
     searchTerm: new FormControl(),
     'withBrackets[gte]': new FormControl(),
     showErrors: new FormControl(false),
@@ -64,6 +66,7 @@ class HomeComponent {
 
   bindQueryParams = this.factory
     .create<Params>([
+      { queryKey: 'withMinlengthValidator', ignoreInvalidForm: true },
       { queryKey: 'searchTerm' },
       { queryKey: 'withBrackets[gte]' },
       { queryKey: 'showErrors', type: 'boolean' },
@@ -121,6 +124,61 @@ describe('BindQueryParams', () => {
       }));
     });
 
+    describe('ignoreInvalidForm', () => {
+      it('should navigate only when control is valid', fakeAsync(() => {
+        spectator = createComponent();
+        const router = spectator.inject(Router);
+
+        spectator.component.group.patchValue({
+          withMinlengthValidator: 'with',
+        });
+
+        tick();
+
+        expect(router.navigate).not.toHaveBeenCalled();
+
+        spectator.component.group.patchValue({
+          withMinlengthValidator: 'with1',
+        });
+
+        tick();
+
+        assertRouterCall(spectator, { withMinlengthValidator: 'with1' });
+      }));
+
+      it('should navigate only when group is valid', fakeAsync(() => {
+        spectator = createComponent({
+          providers: [
+            {
+              provide: BIND_QUERY_PARAMS_OPTIONS,
+              useValue: {
+                ignoreInvalidForm: true,
+                windowRef: window,
+              },
+            },
+          ],
+        });
+        const router = spectator.inject(Router);
+
+        spectator.component.group.patchValue({
+          searchTerm: 'term',
+          withMinlengthValidator: 'with',
+        });
+
+        tick();
+
+        expect(router.navigate).not.toHaveBeenCalled();
+
+        spectator.component.group.patchValue({
+          withMinlengthValidator: 'with1',
+        });
+
+        tick();
+
+        assertRouterCall(spectator, { withMinlengthValidator: 'with1' });
+      }));
+    });
+
     describe('string', () => {
       it('control => query', fakeAsync(() => {
         spectator = createComponent();

projects/ngneat/bind-query-params/src/lib/options.ts

@@ -1,9 +1,11 @@
 import { InjectionToken } from '@angular/core';
+import { BindQueryParamsOptions } from './types';
 
-export const BIND_QUERY_PARAMS_OPTIONS = new InjectionToken('BIND_QUERY_PARAMS_OPTIONS', {
+export const BIND_QUERY_PARAMS_OPTIONS = new InjectionToken<BindQueryParamsOptions>('BIND_QUERY_PARAMS_OPTIONS', {
   providedIn: 'root',
   factory() {
     return {
+      ignoreInvalidForm: false,
       windowRef: window,
     };
   },

projects/ngneat/bind-query-params/src/lib/types.ts

@@ -3,6 +3,7 @@ import { QueryParamDef } from './QueryParamDef';
 export type ParamDefType = 'boolean' | 'array' | 'number' | 'string' | 'object';
 
 export type QueryParamParams<QueryParams = any> = {
+  ignoreInvalidForm?: boolean;
   queryKey: keyof QueryParams & string;
   path?: string;
   type?: ParamDefType;
@@ -12,6 +13,7 @@ export type QueryParamParams<QueryParams = any> = {
 };
 
 export interface BindQueryParamsOptions {
+  ignoreInvalidForm?: boolean;
   windowRef: Window;
 }