fix(storage): should merge the object

Author: NetanelBasal

README.md

@@ -108,7 +108,7 @@ const isNameDisabled$ = formsManager.selectDisabled('onboarding', 'name');
 
 ```ts
 const value$ = formsManager.selectValue('onboarding');
-const nameValue$ = formsManager.selectValue('onboarding', 'name');
+const nameValue$ = formsManager.selectValue<string>('onboarding', 'name');
 ```
 
 - `selectErrors()` - Observe the control's errors

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

@@ -1,6 +1,6 @@
 import { Inject, Injectable, Optional } from '@angular/core';
 import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
-import { clone, coerceArray, filterControlKeys, filterNil, isBrowser } from './utils';
+import { clone, coerceArray, filterControlKeys, filterNil, isBrowser, mergeDeep } from './utils';
 import { merge, Observable, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 import { FormsStore } from './forms-manager.store';
@@ -30,7 +30,9 @@ export class NgFormsManager<FormsState = any> {
     return this.selectControl(formName, path).pipe(map(control => control.disabled));
   }
 
-  selectValue<T extends keyof FormsState>(formName: T, path?: string): Observable<FormsState[T]> {
+  selectValue<T extends keyof FormsState>(formName: T, path?: string): Observable<FormsState[T]>;
+  selectValue<T = any>(formName: keyof FormsState, path: string): Observable<T>;
+  selectValue(formName: keyof FormsState, path?: string): Observable<any> {
     return this.selectControl(formName, path).pipe(map(control => control.value));
   }
 
@@ -41,9 +43,12 @@ export class NgFormsManager<FormsState = any> {
   /**
    * If no path specified it means that it's a single FormControl or FormArray
    */
-  selectControl(formName: keyof FormsState, path?: string): Observable<_AbstractControl> {
+  selectControl<T = any>(
+    formName: keyof FormsState,
+    path?: string
+  ): Observable<_AbstractControl<T>> {
     if (!path) {
-      return this.selectForm(formName);
+      return this.selectForm(formName) as any;
     }
 
     return this.store
@@ -55,10 +60,9 @@ export class NgFormsManager<FormsState = any> {
       );
   }
 
-  // TODO: _AbstractControl should take a generic that should type the `value` property
-  getControl(formName: keyof FormsState, path?: string): _AbstractControl {
+  getControl<T = any>(formName: keyof FormsState, path?: string): _AbstractControl<T> {
     if (!path) {
-      return this.getForm(formName);
+      return this.getForm(formName) as any;
     }
 
     if (this.hasForm(formName)) {
@@ -69,11 +73,10 @@ export class NgFormsManager<FormsState = any> {
     return null;
   }
 
-  // TODO: _AbstractControl should take a generic that should type the `value` property
-  selectForm(
-    formName: keyof FormsState,
+  selectForm<T extends keyof FormsState>(
+    formName: T,
     options: { filterNil: true } = { filterNil: true }
-  ): Observable<AbstractGroup> {
+  ): Observable<AbstractGroup<FormsState[T]>> {
     return this.store
       .select(state => state[formName as any])
       .pipe(options.filterNil ? filterNil : s => s);
@@ -98,31 +101,31 @@ export class NgFormsManager<FormsState = any> {
       arrControlFactory?: ControlFactory | HashMap<ControlFactory>;
     } = {}
   ) {
-    const merged = this.config.merge(config) as Config & { arrControlFactory; persistState };
+    const mergedConfig = this.config.merge(config) as Config & { arrControlFactory; persistState };
     if (isBrowser() && config.persistState && this.hasForm(formName) === false) {
-      const storageValue = this.getFromStorage(merged.storage.key);
+      const storageValue = this.getFromStorage(mergedConfig.storage.key);
       if (storageValue[formName]) {
         this.store.update({
-          [formName]: storageValue[formName],
+          [formName]: mergeDeep(this.buildFormStoreState(formName, form), storageValue[formName]),
         } as Partial<FormsState>);
       }
     }
 
     /** If the form already exist, patch the form with the store value */
     if (this.hasForm(formName) === true) {
-      form.patchValue(this.resolveStoreToForm(formName, form, merged.arrControlFactory), {
+      form.patchValue(this.resolveStoreToForm(formName, form, mergedConfig.arrControlFactory), {
         emitEvent: false,
       });
     } else {
       const value = this.updateStore(formName, form);
-      this.updateStorage(formName, value, merged);
+      this.updateStorage(formName, value, mergedConfig);
     }
 
     const unsubscribe = merge(form.valueChanges, form.statusChanges.pipe(distinctUntilChanged()))
-      .pipe(debounceTime(merged.debounceTime))
+      .pipe(debounceTime(mergedConfig.debounceTime))
       .subscribe(() => {
         const value = this.updateStore(formName, form);
-        this.updateStorage(formName, value, merged);
+        this.updateStorage(formName, value, mergedConfig);
       });
 
     this.valueChanges.set(formName, unsubscribe);
@@ -131,13 +134,27 @@ export class NgFormsManager<FormsState = any> {
     return this;
   }
 
-  patchValue(formName: keyof FormsState, value: any, options) {
+  patchValue<T extends keyof FormsState>(
+    formName: T,
+    value: Partial<FormsState[T]>,
+    options?: {
+      onlySelf?: boolean;
+      emitEvent?: boolean;
+    }
+  ) {
     if (this.instances.has(formName)) {
       this.instances.get(formName).patchValue(value, options);
     }
   }
 
-  setValue(formName: keyof FormsState, value: any, options) {
+  setValue<T extends keyof FormsState>(
+    formName: keyof FormsState,
+    value: FormsState[T],
+    options?: {
+      onlySelf?: boolean;
+      emitEvent?: boolean;
+    }
+  ) {
     if (this.instances.has(formName)) {
       this.instances.get(formName).setValue(value, options);
     }

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

@@ -0,0 +1,78 @@
+import { NgFormsManager, NgFormsManagerConfig } from '@ngneat/forms-manager';
+import { FormControl, FormGroup } from '@angular/forms';
+
+interface AppForms {
+  formOne: string;
+  formTwo: {
+    name: string;
+    age: number;
+  };
+}
+
+const manager = new NgFormsManager<AppForms>(new NgFormsManagerConfig({}));
+
+const formOne = new FormControl('');
+
+const formTwo = new FormGroup({
+  name: new FormControl(''),
+  age: new FormControl(),
+});
+
+manager.upsert('formOne', formOne);
+manager.upsert('formTwo', formTwo);
+
+manager.selectValid('formOne').subscribe(isValid => {
+  // infer boolean
+});
+manager.selectDirty('formOne').subscribe(isDirty => {
+  // infer boolean
+});
+manager.selectDisabled('formOne').subscribe(isDisabled => {
+  // infer boolean
+});
+manager.selectValue('formOne').subscribe(value => {
+  // infer string
+  value.toLowerCase();
+});
+
+manager.selectValue('formTwo').subscribe(group => {
+  // infer { name: string, age: number }
+  group.name;
+  group.age;
+});
+
+manager.selectValue<string>('formTwo', 'name').subscribe(name => {
+  name.toLowerCase();
+});
+
+manager.selectControl('formOne').subscribe(control => {
+  // infer to string
+  control.value.toLowerCase();
+});
+
+manager.selectControl<AppForms['formTwo']>('formTwo').subscribe(group => {
+  // infer { name: string, age: number }
+  group.value.age;
+  group.value.name;
+});
+
+manager.selectControl<string>('formTwo', 'name').subscribe(nameControl => {
+  console.log(nameControl.value);
+});
+
+manager.selectForm('formOne').subscribe(control => {
+  // infer to string
+  control.value.toLowerCase();
+});
+
+manager.selectForm('formTwo').subscribe(form => {
+  // infer { name: string, age: number }
+  form.value.name;
+  form.value.age;
+});
+
+manager.patchValue('formOne', '');
+manager.patchValue('formTwo', { name: '' });
+
+// forces pass the whole object as the method expected
+manager.setValue('formTwo', { name: '', age: 3 });

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

@@ -1,19 +1,11 @@
 import { AbstractControl } from '@angular/forms';
 
-export type _AbstractControl = Pick<
+export type _AbstractControl<T = any> = Pick<
   AbstractControl,
-  | 'value'
-  | 'valid'
-  | 'invalid'
-  | 'disabled'
-  | 'errors'
-  | 'touched'
-  | 'pristine'
-  | 'pending'
-  | 'dirty'
-> & { rawValue: any };
+  'valid' | 'invalid' | 'disabled' | 'errors' | 'touched' | 'pristine' | 'pending' | 'dirty'
+> & { rawValue: T; value: T };
 
-export interface AbstractGroup<C = any> extends _AbstractControl {
+export interface AbstractGroup<C = any> extends _AbstractControl<C> {
   controls: { readonly [P in keyof C]: _AbstractControl };
 }
 

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

@@ -69,3 +69,25 @@ export function filterKeys(obj, cb) {
 export function isBrowser() {
   return typeof window !== 'undefined';
 }
+
+export function mergeDeep(target, ...sources) {
+  if (!sources.length) {
+    return target;
+  }
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) {
+          Object.assign(target, { [key]: {} });
+        }
+        mergeDeep(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+
+  return mergeDeep(target, ...sources);
+}

src/app/demo/demo.component.ts

@@ -46,12 +46,10 @@ export class DemoComponent implements OnInit {
       }),
     });
 
-    this.sub = this.formsManager.selectValue<number>('settings', 'minPrice').subscribe(minPrice => {
+    this.sub = this.formsManager.selectValue('settings', 'minPrice').subscribe(minPrice => {
       setValidators(this.group.get('price'), Validators.min(minPrice));
     });
 
-    const createSkillControl = val => new FormControl(null, Validators.required);
-
     this.settings = new FormGroup({
       minPrice: new FormControl(10),
     });
@@ -62,7 +60,7 @@ export class DemoComponent implements OnInit {
       .upsert('single', this.email, { persistState: true })
       .upsert('config', this.config, {
         persistState: true,
-        arrControlFactory: { skills: createSkillControl },
+        arrControlFactory: { skills: () => new FormControl(null, Validators.required) },
       })
       .upsert('group', this.group, {
         persistState: true,