fix: do not debounce for update on blur

Author: alexcotelin

projects/ngneat/forms-manager/src/lib/forms-manager.ts

@@ -1,14 +1,16 @@
 import { Inject, Injectable, Optional } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { coerceArray, filterControlKeys, filterNil, isBrowser, isObject, mergeDeep } from './utils';
-import { merge, Observable, Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
+import { AbstractControl, FormGroup } from '@angular/forms';
+import { coerceArray, filterControlKeys, filterNil, isBrowser, mergeDeep } from './utils';
+import { EMPTY, merge, Observable, Subject, Subscription, timer } from 'rxjs';
+import { debounce, distinctUntilChanged, filter, map, mapTo, tap } from 'rxjs/operators';
 import { FormsStore } from './forms-manager.store';
 import { Control, ControlFactory, FormKeys, HashMap, UpsertConfig } from './types';
 import { Config, NG_FORMS_MANAGER_CONFIG, NgFormsManagerConfig } from './config';
 import { isEqual } from './isEqual';
 import { deleteControl, findControl, handleFormArray, toStore } from './builders';
 
+const NO_DEBOUNCE = 0;
+
 @Injectable({ providedIn: 'root' })
 export class NgFormsManager<FormsState = any> {
   private readonly store: FormsStore<FormsState>;
@@ -374,10 +376,10 @@ export class NgFormsManager<FormsState = any> {
     }
 
     const unsubscribe = merge(
-      control.valueChanges,
-      control.statusChanges.pipe(distinctUntilChanged())
+      control.statusChanges.pipe(distinctUntilChanged()),
+      ...this.getValueChangeStreams(control)
     )
-      .pipe(debounceTime(mergedConfig.debounceTime))
+      .pipe(debounce(value => (value === NO_DEBOUNCE ? EMPTY : timer(mergedConfig.debounceTime))))
       .subscribe(() => {
         const value = this.updateStore(name, control);
         this.updateStorage(name, value, mergedConfig);
@@ -389,6 +391,25 @@ export class NgFormsManager<FormsState = any> {
     return this;
   }
 
+  private getValueChangeStreams(control: AbstractControl) {
+    const streams = [];
+
+    if (control.updateOn === 'blur') {
+      streams.push(control.valueChanges.pipe(mapTo(NO_DEBOUNCE)));
+    } else {
+      streams.push(control.valueChanges);
+
+      if (control instanceof FormGroup) {
+        return Object.keys(control.controls).reduce(
+          (previous, key) => [...previous, control.get(key).valueChanges.pipe(mapTo(NO_DEBOUNCE))],
+          streams
+        );
+      }
+    }
+
+    return streams;
+  }
+
   private removeFromStorage() {
     localStorage.setItem(this.config.merge().storage.key, JSON.stringify(this.store.getValue()));
   }