feat(api): change the api to be more angularish

Author: NetanelBasal

README.md

@@ -87,56 +87,56 @@ With this setup, you’ll have an extensive API to query the store and update th
 
 ## API
 
-- `selectValid()` - Whether the control is valid
+- `valueChanges()` - Observe the control's value
 
 ```ts
-const isFormValid$ = formsManager.selectValid('onboarding');
-const isNameValid$ = formsManager.selectValid('onboarding', 'name');
+const value$ = formsManager.valueChanges('onboarding');
+const nameValue$ = formsManager.valueChanges<string>('onboarding', 'name');
 ```
 
-- `selectDirty()` - Whether the control is dirty
+- `validityChanges()` - Whether the control is valid
 
 ```ts
-const isFormDirty$ = formsManager.selectDirty('onboarding');
-const isNameDirty$ = formsManager.selectDirty('onboarding', 'name');
+const valid$ = formsManager.validityChanges('onboarding');
+const nameValid$ = formsManager.validityChanges('onboarding', 'name');
 ```
 
-- `selectDisabled()` - Whether the control is disabled
+- `dirtyChanges()` - Whether the control is dirty
 
 ```ts
-const isFormDisabled$ = formsManager.selectDisabled('onboarding');
-const isNameDisabled$ = formsManager.selectDisabled('onboarding', 'name');
+const dirty$ = formsManager.dirtyChanges('onboarding');
+const nameDirty$ = formsManager.dirtyChanges('onboarding', 'name');
 ```
 
-- `selectValue()` - Observe the control's value
+- `disableChanges()` - Whether the control is disabled
 
 ```ts
-const value$ = formsManager.selectValue('onboarding');
-const nameValue$ = formsManager.selectValue<string>('onboarding', 'name');
+const disabled$ = formsManager.disableChanges('onboarding');
+const nameDisabled$ = formsManager.disableChanges('onboarding', 'name');
 ```
 
-- `selectErrors()` - Observe the control's errors
+- `errorsChanges()` - Observe the control's errors
 
 ```ts
-const errors$ = formsManager.selectErrors('onboarding');
-const nameErros$ = formsManager.selectErrors('onboarding', 'name');
+const errors$ = formsManager.errorsChanges<Errors>('onboarding');
+const nameErros$ = formsManager.errorsChanges<Errors>('onboarding', 'name');
 ```
 
-- `selectControl()` - Observe the control's state
+- `controlChanges()` - Observe the control's state
 
 ```ts
-const control$ = formsManager.selectControl('onboarding');
-const nameControl$ = formsManager.selectControl('onboarding', 'name');
+const control$ = formsManager.controlChanges('onboarding');
+const nameControl$ = formsManager.controlChanges<string>('onboarding', 'name');
 ```
 
 - `getControl()` - Get the control's state
 
 ```ts
 const control = formsManager.getControl('onboarding');
-const nameControl = formsManager.getControl('onboarding', 'name');
+const nameControl = formsManager.getControl<string>('onboarding', 'name');
 ```
 
-`selectControl` and `getControl` will return the following state:
+`controlChanges` and `getControl` will return the following state:
 
 ```ts
 {
@@ -153,18 +153,6 @@ const nameControl = formsManager.getControl('onboarding', 'name');
 }
 ```
 
-- `selectForm()` - Observe the form's state
-
-```ts
-const form$ = formsManager.selectForm('onboarding');
-```
-
-- `getForm()` - Get the form's state
-
-```ts
-const form = formsManager.getForm('onboarding');
-```
-
 - `hasForm()` - Whether the form exists
 
 ```ts
@@ -204,6 +192,12 @@ formsManager.destroy('onboarding');
 formsManager.destroy();
 ```
 
+- `controlDestroyed()` - Emits when the control is destroyed
+
+```ts
+formsManager.controlChanges('login').pipe(takeUntil(controlDestroyed('login')));
+```
+
 ## Persist to Local Storage
 
 In the `upsert` method, pass the `persistState` flag:
@@ -304,7 +298,7 @@ export class OnboardingComponent {
   constructor(private formsManager: NgFormsManager<AppForms>, private builder: FormBuilder) {}
 
   ngOnInit() {
-    this.formsManager.selectValue('onboarding').subscribe(value => {
+    this.formsManager.valueChanges('onboarding').subscribe(value => {
       // value now typed as AppForms['onboarding']
     });
   }

package-lock.json

@@ -25,8 +25,8 @@
     "@angular/router": "~7.0.0",
     "@schuchard/prettier": "^3.1.0",
     "core-js": "^2.5.4",
-    "lodash.isequal": "^4.5.0",
     "ngx-semantic-version": "^1.2.1",
+    "ngx-take-until-destroy": "^5.4.0",
     "rxjs": "~6.3.3",
     "zone.js": "~0.8.26"
   },

package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "whitelistedNonPeerDependencies": ["lodash.isequal"]
+  "whitelistedNonPeerDependencies": ["fast-deep-equal"]
 }

projects/ngneat/forms-manager/ng-package.json

@@ -21,8 +21,5 @@
     "name": "Netanel Basal",
     "email": "[email protected]",
     "url": "https://netbasal.com"
-  },
-  "dependencies": {
-    "lodash.isequal": "^4.5.0"
   }
 }

projects/ngneat/forms-manager/package.json

@@ -0,0 +1,103 @@
+import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
+import { Control, ControlFactory, HashMap } from './types';
+import { clone } from './utils';
+
+export function toStore<FormsState>(name: keyof FormsState, control: AbstractControl) {
+  let value;
+
+  if (control instanceof FormControl) {
+    value = buildValue(control);
+    return value;
+  }
+
+  if (control instanceof FormGroup || control instanceof FormArray) {
+    value = buildValue(control);
+
+    for (const key of Object.keys(control.controls)) {
+      const current = control.controls[key];
+      if (current instanceof FormGroup || current instanceof FormArray) {
+        value.controls[key] = toStore(name, current);
+      } else {
+        value.controls[key] = buildValue(current);
+      }
+    }
+  }
+
+  return value;
+}
+
+export function handleFormArray(
+  formValue: HashMap | any[],
+  control: AbstractControl,
+  arrControlFactory: ControlFactory | HashMap<ControlFactory>
+) {
+  if (control instanceof FormArray) {
+    clearFormArray(control as FormArray);
+    if (!arrControlFactory) {
+      throw new Error('Please provide arrControlFactory');
+    }
+    formValue.forEach((v, i) =>
+      (control as FormArray).insert(i, (arrControlFactory as Function)(v))
+    );
+  } else {
+    Object.keys(formValue).forEach(controlName => {
+      const value = formValue[controlName];
+      if (Array.isArray(value) && control.get(controlName) instanceof FormArray) {
+        if (!arrControlFactory || (arrControlFactory && !(controlName in arrControlFactory))) {
+          throw new Error(`Please provide arrControlFactory for ${controlName}`);
+        }
+        const current = control.get(controlName) as FormArray;
+        const fc = arrControlFactory[controlName];
+        clearFormArray(current);
+        value.forEach((v, i) => current.insert(i, fc(v)));
+      }
+    });
+  }
+}
+
+export function deleteControl(snapshot, controls: any[]) {
+  return Object.keys(snapshot).reduce((acc, currentFormName) => {
+    if (controls.includes(currentFormName) === false) {
+      acc[currentFormName] = snapshot[currentFormName];
+    }
+    return acc;
+  }, {});
+}
+
+export function findControl(control: Control, path: string) {
+  const [first, ...rest] = path.split('.');
+  if (rest.length === 0) {
+    return control.controls[first];
+  }
+
+  return rest.reduce((current: Control, name: string) => {
+    return current.controls.hasOwnProperty(name) ? current.controls[name] : null;
+  }, control.controls[first]);
+}
+
+export function buildValue(control: Partial<AbstractControl>): Control {
+  const value = {
+    value: clone(control.value), // Clone object to prevent issue with third party that would be affected by store freezing.
+    rawValue: (control as any).getRawValue ? (control as any).getRawValue() : null,
+    valid: control.valid,
+    dirty: control.dirty,
+    invalid: control.invalid,
+    disabled: control.disabled,
+    errors: control.errors,
+    touched: control.touched,
+    pristine: control.pristine,
+    pending: control.pending,
+  };
+
+  if (control instanceof FormGroup || control instanceof FormArray) {
+    value['controls'] = control instanceof FormArray ? [] : {};
+  }
+
+  return value;
+}
+
+export function clearFormArray(control: FormArray) {
+  while (control.length !== 0) {
+    control.removeAt(0);
+  }
+}

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

@@ -20,6 +20,7 @@ export function mergeConfig(
   inlineConfig: Partial<Config>
 ) {
   return {
+    ...defaults,
     storage: {
       ...defaults.storage,
       ...providerConfig.storage,