@reactables/forms 1.0.0-beta.5 → 1.0.0

package/README.md

@@ -7,6 +7,13 @@ Reactive forms with [Reactables](https://github.com/reactables/reactables/tree/m
 ## Table of Contents
 
 1. [Installation](#installation)
+1. [Examples](#examples)
+    1. [Basic Form Group](#basic-form-group)
+    1. [Validation](#validation-example)
+    1. [Async Validation](#async-validation-example)
+    1. [Normalizing Values](#normalizing-values)
+    1. [Custom Reducer](#custom-reducer-example)
+
 1. [API](#api)
     1. [RxActions](#api-actions)
         1. [updateValues](#api-actions-update-values)
@@ -27,18 +34,254 @@ Reactive forms with [Reactables](https://github.com/reactables/reactables/tree/m
         1. [FormControl](#api-form-control)
         1. [ControlRef](#api-control-ref)
         1. [FormErrors](#api-form-errors)
+        1. [ValidatorFn](#api-validator-fn)
+        1. [ValidatorAsyncFn](#api-validator-fn-async)
         1. [FormReducers](#api-form-reducers)
+        1. [CustomReducers](#api-custom-reducers)
+        1. [BaseFormState](#api-base-form-state)
+        1. [BaseControl](#api-base-control)
 
 
 ## Installation <a name="installation"></a>
 
 Installation requires [RxJS](https://rxjs.dev/) to be present.
 
-`npm i rxjs @reactables/forms`
+`npm i rxjs` (if not already installed)
+
+`npm i @reactables/forms`
+
+## Examples <a name="examples"></a>
+
+### Basic Form Group <a name="basic-form-group"></a>
+
+[See full example on StackBlitz](https://stackblitz.com/edit/github-qtpo1k-vm45ed?file=src%2Findex.js)
+
+```typescript
+import { control, build, group } from '@reactables/forms';
+
+const [state$, actions] = build(
+  group({
+    controls: {
+      name: control(['']),
+    },
+  })
+);
+
+// Cache the DOM
+const nameControlEl = document.getElementById('name-control');
+
+// Bind Event Handlers
+nameControlEl.oninput = ({ target: { value } }) => {
+  actions.updateValues({
+    controlRef: ['name'],
+    value,
+  });
+};
+
+nameControlEl.onblur = () => {
+  actions.markControlAsTouched({ controlRef: ['name'] });
+};
+
+// Subscribe to state updates and bind to view.
+state$.subscribe((state) => {
+  const { name } = state;
+
+  nameControlEl.value = name.value;
+});
+
+```
+
+### Validation <a name="validation-example"></a>
+
+`@reactable/forms` only comes with 3 built in validators, `required`, `email` & `arrayNotEmpty`. The developer can implement their own `ValidatorFn`s and provide them when building the reactable.
+
+[See full example on StackBlitz](https://stackblitz.com/edit/github-qtpo1k-f6tz82?file=src%2Findex.js)
+
+```typescript
+import { control, build, group } from '@reactables/forms';
+
+// Create Reactable
+const rxForm = build(
+  group({
+    controls: {
+      donuts: control(['0', ['required', 'min4']]),
+    },
+  }),
+  {
+    providers: {
+      validators: {
+        min4: (value) => ({ min4: Number(value) < 4 }),
+      },
+    },
+  }
+);
+
+const [state$, actions] = rxForm;
+
+// ...Cache the DOM and bind event handlers
+
+// Subscribe to state updates and bind to view.
+state$.subscribe((state) => {
+  const { donuts } = state;
+
+  donutControlEl.value = donuts.value;
+
+  const handleErrors = (el, show) => {
+    el.className = show ? 'form-error show' : 'form-error';
+  };
+
+  handleErrors(donuntMinOrderErrorEl, donuts.touched && donuts.errors.min4);
+  handleErrors(donuntRequiredErrorEl, donuts.touched && donuts.errors.required);
+});
+
+
+
+```
+
+### Async Validation <a name="async-validation-example"></a>
+
+`FormControl`s have a `pending: boolean` state when their value changes and are awaiting the result from asynchronous validation.
+
+[See full example on StackBlitz](https://stackblitz.com/edit/github-qtpo1k-wvznqm?file=src%2Findex.js)
+
+```typescript
+import { control, build, group } from '@reactables/forms';
+import { of, switchMap, delay } from 'rxjs';
+
+const [state$, actions] = build(
+  group({
+    controls: {
+      email: control(['', ['required', 'email'], ['blacklistedEmail']]),
+    },
+  }),
+  {
+    providers: {
+      asyncValidators: {
+        blacklistedEmail: (control$) =>
+          control$.pipe(
+            switchMap(({ value }) =>
+              of({
+                blacklistedEmail: value === 'already@taken.com',
+              }).pipe(delay(1000))
+            )
+          ),
+      },
+    },
+  }
+);
+
+// ...Bind Event Handlers
+
+// Subscribe to state updates and bind to view.
+state$.subscribe((state) => {
+  const { email } = state;
+
+  emailControlEl.value = email.value;
+
+  const handleErrors = (el, show) => {
+    el.className = show ? 'form-error show' : 'form-error';
+  };
+
+  emailPendingEl.className = email.pending ? 'show' : '';
+
+  handleErrors(emailRequiredErrorEl, email.touched && email.errors.required);
+  handleErrors(emailAsyncErrorEl, email.errors.blacklistedEmail);
+});
+
+
+```
+
+### Normalize Values <a name="normalizing-values"></a>
+
+User input for a `FormControl` leaf (i.e having no child controls) can be normalized via normalizer functions provided during form initialization.
+
+[See full example on StackBlitz](https://stackblitz.com/edit/github-qtpo1k-frpncu?file=src%2findex.js)
+
+```typescript
+import { control, build, group } from '@reactables/forms';
+
+export const normalizePhone = (value) => {
+  let input = value.replace(/\D/g, '').substring(0, 10); // First ten digits of input only
+  const areaCode = input.substring(0, 3);
+  const middle = input.substring(3, 6);
+  const last = input.substring(6, 10);
+
+  if (input.length > 6) {
+    input = `(${areaCode}) ${middle} - ${last}`;
+  } else if (input.length > 3) {
+    input = `(${areaCode}) ${middle}`;
+  } else if (input.length > 0) {
+    input = `(${areaCode}`;
+  }
+
+  return input;
+};
+
+const rxForm = build(
+  group({
+    controls: {
+      phone: control({
+        initialValue: '',
+        normalizers: ['phone']
+      }),
+    },
+  }),
+  {
+    providers: {
+      normalizers: {
+        phone: normalizePhone,
+      },
+    },
+  }
+);
+
+// ... Bind event handlers and view
+```
+
+### Custom Reducer <a name="custom-reducer-example"></a>
+
+You can declare [`CustomReducer`s](#api-custom-reducers) during form initialization to implement custom behaviour.
+
+Below the form reactable will have a `doubleOrder` action method which can be called to double the order amount.
+
+[See full example on StackBlitz](https://stackblitz.com/edit/github-qtpo1k-3qppus?file=src%2Findex.js)
+
+```typescript
+import { control, build, group } from '@reactables/forms';
+
+const [state$, actions] = build(
+  group({
+    controls: {
+      donuts: control(['0', 'min4']),
+    },
+  }),
+  {
+    providers: {
+      validators: {
+        min4: (value) => ({ min4: Number(value) < 4 }),
+      },
+    },
+    reducers: {
+      doubleOrder:  (formReducers, state) => {
+        /** Use built in Form Reducers for updating the form tree. **/
+        const { updateValues } = formReducers;
+
+        const orders = Number(state.form.donuts.value);
+        const value = (orders * 2).toString();
+
+        return updateValues(state, { controlRef: ['donuts'], value });
+      };,
+    },
+  }
+);
+
+// ... Bind event handlers and view
+
+```
 
 ## API <a name="api"></a>
 
-The API for building Reactable Forms is very similar to [Angular FormBuilder](https://angular.io/api/forms/FormBuilder). It has been adapted to support Reactable features.
+The API for building Reactable Forms inspired by [Angular FormBuilder](https://angular.io/api/forms/FormBuilder). It has been adapted to support Reactable features.
 
 ### `RxActions` <a name="api-actions"></a>
 
@@ -51,7 +294,7 @@ Updates values of a [`FormControl`](#api-form-control). For form group and form
 ```typescript
 type updateValues = <T>(payload: UpdateValuesPayload<T>) => void;
 
-export interface UpdateValuesPayload<T> {
+interface UpdateValuesPayload<T> {
   value: T;
   controlRef: ControlRef;
 }
@@ -65,7 +308,7 @@ Adds a control to a form group.
 ```typescript
 type addControl = (payload: AddControlPayload) => void;
 
-export interface AddControlPayload {
+interface AddControlPayload {
   config: AbstractControlConfig;
   controlRef: ControlRef;
 }
@@ -79,7 +322,7 @@ Pushes a control to a form array.
 ```typescript
 type pushControl = (payload: PushControlPayload) => void;
 
-export interface PushControlPayload {
+interface PushControlPayload {
   config: AbstractControlConfig;
   controlRef: ControlRef;
 }
@@ -106,12 +349,12 @@ type markControlAsPristine = (payload: ControlRef) => void;
 
 #### `markControlAsTouched` <a name="api-actions-mark-as-touched"></a>
 
-Marks a control and all ancestors as touched. Can set `markAll` to `true` to mark all descendants as touched as well.
+Marks a control and all ancestors as touched. Can set `markAll` to `true` to mark all descendants as touched as well (defaults to `false`).
 
 ```typescript
 type markControlAsTouched = (payload: MarkTouchedPayload) => void;
 
-export interface MarkTouchedPayload {
+interface MarkTouchedPayload {
   controlRef: ControlRef;
   markAll?: boolean;
 }
@@ -129,7 +372,7 @@ type markControlAsUnTouched = (payload: ControlRef) => void;
 
 #### `resetControl` <a name="api-actions-resetControl"></a>
 
-Marks a control and all descendants as untouched. This will recheck ancestor controls and update the touched status.
+Resets a control by removing existing control and rebuilding it with the original configuration.
 
 ```typescript
 type resetControls = (payload: ControlRef) => void;
@@ -155,17 +398,10 @@ interface RxFormOptions {
   effects?: Effect<unknown, unknown>[];
   sources?: Observable<Action<unknown>>[] | { [key: string]: Observable<unknown> };
 }
-
-type CustomReducer = (
-  reducers: FormReducers,
-  state: BaseFormState<unknown>,
-  action: Action<unknown>,
-) => BaseFormState<unknown>;
-
 ```
 | Property | Description |
 | -------- | ----------- |
-| reducers (optional) | Dictionary of `CustomReducer`s to implement custom form behaviour. The `CustomReducer` provides built in [`FormReducers`](#api-form-reducers). **Form state updates need to be made with [`FormReducers`](#api-form-reducers) to maintain integrity of the form state tree (i.e validation states of parent and child controls)**. |
+| reducers (optional) | Dictionary of [`CustomReducer`s](#api-custom-reducers) to implement custom form behaviour. The `CustomReducerFunc`(#api-custom-reducers) provides built in [`FormReducers`](#api-form-reducers). **Form state updates need to be made with [`FormReducers`](#api-form-reducers) to maintain integrity of the form state tree (i.e validation states of parent and child controls)**. |
 | effects (optional) | Array of [Effects](https://github.com/reactables/reactables/tree/main/packages/core#api-effect) to be registered to the Reactable. |
 | sources (optional) | Additional [Action](https://github.com/reactables/reactables/tree/main/packages/core#action-) Observables the Reactable is listening to. Can be an array or a dictionary where key is the action type and value is the Observable emitting the payload. |
 
@@ -217,7 +453,7 @@ interface FormArrayConfig {
 Form state. Dictionary of [`FormControl`](#api-form-control)(s) where the key is a period separated representation of the [`ControlRef`](#api-control-ref) tuple.
 
 ```typescript
-export interface Form<T> {
+interface Form<T> {
   root?: FormControl<T>;
   [key: string]: FormControl<unknown>;
 }
@@ -228,7 +464,7 @@ export interface Form<T> {
 
 ```typescript
 
-export interface FormControl<T> extends BaseControl<T>, Hub2Fields {
+interface FormControl<T> {
   pristineValue: T;
   controlRef: ControlRef;
   value: T;
@@ -269,18 +505,36 @@ Control Reference represented as a tuple for the [`FormControl`](#api-form-contr
 Dictionary of errors for the control.
 
 ```typescript
-export interface FormErrors {
+interface FormErrors {
   [key: string]: boolean;
 }
 ```
 
+#### `ValidatorFn` <a name="api-validator-fn"></a>
+
+Validator function that reads the value of the `FormControl` and returns a `FormErrors` object.
+
+```typescript
+type ValidatorFn = (value: unknown) => FormErrors
+```
+
+#### `ValidatorFnAsync` <a name="api-validator-fn-async"></a>
+
+Validator function takes in an `BaseControl` observable and returns an `Observable<FormErrors>`.
+
+```typescript
+type ValidatorAsyncFn = <T>(control$: Observable<BaseControl<T>>) => Observable<FormErrors>;
+
+```
+
+
 #### `FormReducers` <a name="api-form-reducers"></a>
 
-Built in reducers which can be used to update the state of the form tree. Payload and behaviour is the same and descrbed in [`RxActions`](#api-actions); 
+Built in reducers which can be used to update the state of the form tree. Payload and behaviour is the same and described in [`RxActions`](#api-actions);
 
 ```typescript
 
-export interface FormReducers {
+interface FormReducers {
   updateValues: <T>(state: BaseFormState<T>, payload: UpdateValuesPayload<unknown>,
   ) => BaseFormState<T>;
   removeControl: <T>(state: BaseFormState<T>, payload: ControlRef) => BaseFormState<T>;
@@ -292,4 +546,55 @@ export interface FormReducers {
   ) => BaseFormState<T>;
   resetControl: <T>(state: BaseFormState<T>, payload: ControlRef) => BaseFormState<T>;
 }
+```
+#### `CustomReducers` <a name="api-custom-reducers"></a>
+
+```typescript
+type CustomReducerFunc = (
+  reducers: FormReducers,
+  state: BaseFormState<unknown>,
+  action: Action<unknown>,
+) => BaseFormState<unknown>;
+
+type CustomReducer =
+  | CustomReducerFunc
+  | {
+      reducer: CustomReducerFunc;
+      effects?: Effect<unknown, unknown>[] | ((payload?: unknown) => ScopedEffects<unknown>);
+    };
+
+```
+
+#### `BaseFormState` <a name="api-base-form-state"></a>
+
+Form state before it is fully validated. This is accessible in `CustomReducer`s so developer can read the current state and implement custom form behaviours.
+
+```typescript
+interface BaseFormState<T> {
+  form: BaseForm<T>;
+}
+
+interface BaseForm<T> {
+  root?: BaseControl<T>;
+  [key: string]: BaseControl<unknown>;
+}
+
+```
+
+#### `BaseControl` <a name="api-base-control"></a>
+
+`BaseControl` contains some control information before a fully validated `FormControl` is created.
+
+```typescript
+
+interface BaseControl<T> {
+  pristineValue: T;
+  controlRef: ControlRef;
+  value: T;
+  dirty: boolean;
+  touched: boolean;
+  validatorErrors: FormErrors;
+  config: AbstractControlConfig;
+  key: string;
+}
 ```

package/dist/Helpers/controlRefCheck.d.ts

@@ -0,0 +1,5 @@
+import { ControlRef } from '../Models';
+/**
+ * @description see if any keys in a ControlRef has a "." probably a mistake by developer
+ */
+export declare const controlRefCheck: (ref: ControlRef) => void;

package/dist/Helpers/controlRefCheck.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Helpers/index.d.ts

@@ -1 +1,3 @@
 export { getArrayItems } from './getArrayItems';
+export { getDescendantControls } from './getDescendantControls';
+export { getAncestorControls } from './getAncestorControls';

package/dist/Models/Controls.d.ts

@@ -29,10 +29,10 @@ export interface FormControl<T> extends BaseControl<T>, Hub2Fields {
 }
 export interface BaseFormState<T> {
     form: BaseForm<T>;
-    changedControls?: {
+    _changedControls?: {
         [key: string]: BaseControl<unknown>;
     };
-    removedControls?: {
+    _removedConrols?: {
         [key: string]: BaseControl<unknown>;
     };
 }

package/dist/Reducers/Hub1/updateValues.d.ts

@@ -2,4 +2,4 @@ import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
 import { UpdateValuesPayload } from '../../Models/Payloads';
 import { RxFormProviders } from '../../RxForm/RxForm';
-export declare const updateValues: <T>({ form, changedControls, removedControls }: BaseFormState<T>, action: Action<UpdateValuesPayload<unknown>>, providers: RxFormProviders, mergeChanges?: boolean) => BaseFormState<T>;
+export declare const updateValues: <T>({ form, _changedControls, _removedConrols }: BaseFormState<T>, action: Action<UpdateValuesPayload<unknown>>, providers: RxFormProviders, mergeChanges?: boolean) => BaseFormState<T>;

package/dist/Reducers/Hub2/mergeControls.d.ts

@@ -1,5 +1,5 @@
 import { Form, FormControl, BaseFormState } from '../../Models/Controls';
-export declare const mergeControls: <T>(state: Form<T>, { form, changedControls, removedControls }: BaseFormState<unknown>) => {
+export declare const mergeControls: <T>(state: Form<T>, { form, _changedControls, _removedConrols }: BaseFormState<unknown>) => {
     [x: string]: FormControl<unknown>;
     root?: FormControl<unknown>;
 };

package/dist/RxForm/RxForm.d.ts

@@ -17,7 +17,7 @@ export type RxFormActions = {
     markControlAsTouched: (payload: MarkTouchedPayload) => void;
     markControlAsUntouched: (payload: ControlRef) => void;
     resetControl: (payload: ControlRef) => void;
-};
+} & ActionMap;
 export interface FormReducers {
     updateValues: <T>(state: BaseFormState<T>, payload: UpdateValuesPayload<unknown>) => BaseFormState<T>;
     removeControl: <T>(state: BaseFormState<T>, payload: ControlRef) => BaseFormState<T>;
@@ -31,7 +31,7 @@ export interface FormReducers {
 export type CustomReducerFunc = (reducers: FormReducers, state: BaseFormState<unknown>, action: Action<unknown>) => BaseFormState<unknown>;
 export type CustomReducer = CustomReducerFunc | {
     reducer: CustomReducerFunc;
-    effects?: ((payload?: unknown) => ScopedEffects<unknown>) | Effect<unknown, unknown>[];
+    effects?: Effect<unknown, unknown>[] | ((payload?: unknown) => ScopedEffects<unknown>);
 };
 export type CustomReducers<T> = {
     [key in keyof (T & {
@@ -57,6 +57,6 @@ export interface RxFormProviders {
         [key: string]: ValidatorAsyncFn;
     };
 }
-export declare const build: (config: AbstractControlConfig, options?: RxFormOptions) => Reactable<Form<unknown>, ActionMap & RxFormActions>;
-export declare const load: (state: Form<unknown>, options?: RxFormOptions) => Reactable<Form<unknown>, ActionMap & RxFormActions>;
+export declare const build: (config: AbstractControlConfig, options?: RxFormOptions) => Reactable<Form<unknown>, RxFormActions>;
+export declare const load: (state: Form<unknown>, options?: RxFormOptions) => Reactable<Form<unknown>, RxFormActions>;
 export {};

package/dist/index.js

@@ -240,8 +240,8 @@ var getAsyncValidationActions = function (formControls) {
 var buildHub2Source = function (hub1State$) {
     var hub1StateMapped$ = hub1State$.pipe(operators.map(function (payload) { return ({ type: 'formChange', payload: payload }); }));
     var sourceForHub2$ = hub1StateMapped$.pipe(operators.mergeMap(function (formChangeAction) {
-        var changedControls = formChangeAction.payload.changedControls;
-        var controlsToCheck = changedControls ? Object.values(changedControls) : [];
+        var _changedControls = formChangeAction.payload._changedControls;
+        var controlsToCheck = _changedControls ? Object.values(_changedControls) : [];
         var asyncValidationActions = getAsyncValidationActions(controlsToCheck);
         return rxjs.of.apply(void 0, __spreadArray([formChangeAction], asyncValidationActions, false));
     }));
@@ -336,6 +336,46 @@ var getAncestorControls = function (controlRef, form, excludeSelf) {
     });
 };
 
+/**
+ * @description see if any keys in a ControlRef has a "." probably a mistake by developer
+ */
+var controlRefCheck = function (ref) {
+    try {
+        var hasError = ref.some(function (key) {
+            if (typeof key === 'string') {
+                return key.includes('.');
+            }
+            return false;
+        });
+        if (hasError) {
+            var refString = "[".concat(ref.reduce(function (acc, key, index) {
+                if (index > 0) {
+                    acc = acc.concat(', ');
+                }
+                if (typeof key === 'number') {
+                    return acc.concat(key.toString());
+                }
+                return acc.concat("'".concat(key, "'"));
+            }, ''), "]");
+            var suggestion = "[".concat(ref.reduce(function (acc, key, index) {
+                if (index > 0) {
+                    acc = acc.concat(', ');
+                }
+                if (typeof key === 'number') {
+                    return acc.concat(key.toString());
+                }
+                var splitted = key
+                    .split('.')
+                    .map(function (key) { return "'".concat(key, "'"); })
+                    .join(', ');
+                return acc.concat("".concat(splitted));
+            }, ''), "]");
+            console.warn("You provided ".concat(refString, ". Did you mean ").concat(suggestion, "?"));
+        }
+    }
+    catch (_a) { }
+};
+
 var UPDATE_DESCENDANT_VALUES = 'UPDATE_DESCENDANT_VALUES';
 var updateDescendantValues = function (form, _a, providers) {
     var _b = _a.payload, controlRef = _b.controlRef, value = _b.value;
@@ -364,10 +404,11 @@ var updateDescendantValues = function (form, _a, providers) {
 // Use AddControlPayload/RemoveControl action reducers to add/remove control
 var updateValues = function (_a, action, providers, mergeChanges) {
     var _b, _c;
-    var form = _a.form, _d = _a.changedControls, changedControls = _d === void 0 ? {} : _d, _e = _a.removedControls, removedControls = _e === void 0 ? {} : _e;
+    var form = _a.form, _d = _a._changedControls, _changedControls = _d === void 0 ? {} : _d, _e = _a._removedConrols, _removedConrols = _e === void 0 ? {} : _e;
     if (mergeChanges === void 0) { mergeChanges = false; }
     var normalizers = providers.normalizers;
     var _f = action.payload, controlRef = _f.controlRef, value = _f.value;
+    controlRefCheck(controlRef);
     // Update its own value
     var ctrlKey = getFormKey(controlRef);
     var newValue = value;
@@ -384,7 +425,7 @@ var updateValues = function (_a, action, providers, mergeChanges) {
     var newControl = __assign(__assign({}, form[ctrlKey]), { validatorErrors: validatorErrors, dirty: !isEqual__default["default"](value, form[ctrlKey].pristineValue), value: newValue });
     var result = {
         form: __assign(__assign({}, form), (_b = {}, _b[ctrlKey] = newControl, _b)),
-        changedControls: (_c = {}, _c[newControl.key] = newControl, _c)
+        _changedControls: (_c = {}, _c[newControl.key] = newControl, _c)
     };
     var configControls = config.controls;
     // Update its descendants
@@ -400,7 +441,7 @@ var updateValues = function (_a, action, providers, mergeChanges) {
             var _a;
             return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
         }, {});
-        result = __assign(__assign({}, result), { form: updatedDescendants, changedControls: __assign(__assign({}, result.changedControls), changedDescendantControls) });
+        result = __assign(__assign({}, result), { form: updatedDescendants, _changedControls: __assign(__assign({}, result._changedControls), changedDescendantControls) });
     }
     // Update its Ancestors
     if (controlRef.length) {
@@ -413,7 +454,7 @@ var updateValues = function (_a, action, providers, mergeChanges) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
     }, {});
-    var mergedResult = __assign(__assign({}, result), { changedControls: __assign(__assign(__assign({}, (mergeChanges ? changedControls : undefined)), changedAncestorControls), result.changedControls), removedControls: mergeChanges ? removedControls : undefined });
+    var mergedResult = __assign(__assign({}, result), { _changedControls: __assign(__assign(__assign({}, (mergeChanges ? _changedControls : undefined)), changedAncestorControls), result._changedControls), _removedConrols: mergeChanges ? _removedConrols : undefined });
     return mergedResult;
 };
 
@@ -450,6 +491,7 @@ var removeControl = function (state, action, providers, mergeChanges) {
     if (mergeChanges === void 0) { mergeChanges = false; }
     var form = state.form;
     var controlRef = action.payload;
+    controlRefCheck(controlRef);
     var controlToRemove = getControl(controlRef, form);
     if (!controlToRemove) {
         throw 'Control not found';
@@ -495,13 +537,13 @@ var removeControl = function (state, action, providers, mergeChanges) {
         type: UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL,
         payload: controlRef
     }, providers);
-    var changedControls = __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), getAncestorControls(controlRef.slice(0, -1), result).reduce(function (acc, control) {
+    var _changedControls = __assign(__assign({}, (mergeChanges ? state._changedControls || {} : undefined)), getAncestorControls(controlRef.slice(0, -1), result).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
     }, {}));
     // Check for reindexing for changed controls
     if (parentIsFormArray) {
-        changedControls = Object.entries(changedControls).reduce(function (acc, _a) {
+        _changedControls = Object.entries(_changedControls).reduce(function (acc, _a) {
             var _b, _c;
             var key = _a[0], control = _a[1];
             var oldIndex = control.controlRef.at(parentRef.length);
@@ -522,19 +564,19 @@ var removeControl = function (state, action, providers, mergeChanges) {
             }
         }, {});
     }
-    var removedControls = __assign(__assign({}, (mergeChanges ? state.removedControls || {} : undefined)), (_a = {}, _a[controlToRemove.key] = controlToRemove, _a));
+    var _removedConrols = __assign(__assign({}, (mergeChanges ? state._removedConrols || {} : undefined)), (_a = {}, _a[controlToRemove.key] = controlToRemove, _a));
     descendants
         .map(function (_a) {
         var key = _a.key;
         return key;
     })
         .forEach(function (key) {
-        delete changedControls[key];
+        delete _changedControls[key];
     });
     return {
         form: result,
-        changedControls: changedControls,
-        removedControls: removedControls
+        _changedControls: _changedControls,
+        _removedConrols: _removedConrols
     };
 };
 
@@ -574,6 +616,7 @@ var getControlBranch = function (controlRef, form) {
 var addControl = function (state, action, providers, mergeChanges) {
     if (mergeChanges === void 0) { mergeChanges = false; }
     var _a = action.payload, config = _a.config, controlRef = _a.controlRef;
+    controlRefCheck(controlRef);
     // If controlRef does not exist we are adding control to a Form Group
     if (!getControl(controlRef.slice(0, -1), state.form)) {
         throw 'You are attempting to add a control to a non-existent form group';
@@ -584,14 +627,14 @@ var addControl = function (state, action, providers, mergeChanges) {
         type: UPDATE_ANCESTOR_VALUES_ADD_CONTROL,
         payload: { controlRef: controlRef, value: newValue }
     }, providers);
-    var changedControls = getControlBranch(controlRef, ancestorsUpdated).reduce(function (acc, control) {
+    var _changedControls = getControlBranch(controlRef, ancestorsUpdated).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
     }, {});
     return {
         form: ancestorsUpdated,
-        changedControls: __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), changedControls),
-        removedControls: mergeChanges ? state.removedControls || {} : undefined
+        _changedControls: __assign(__assign({}, (mergeChanges ? state._changedControls || {} : undefined)), _changedControls),
+        _removedConrols: mergeChanges ? state._removedConrols || {} : undefined
     };
 };
 
@@ -599,6 +642,7 @@ var pushControl = function (state, action, providers, mergeChanges) {
     if (mergeChanges === void 0) { mergeChanges = false; }
     var newControlRef;
     var _a = action.payload, config = _a.config, controlRef = _a.controlRef;
+    controlRefCheck(controlRef);
     var existingControl = getControl(controlRef, state.form);
     if (!existingControl)
         throw 'You are attempting to push to a control that does not exist';
@@ -615,14 +659,14 @@ var pushControl = function (state, action, providers, mergeChanges) {
         type: UPDATE_ANCESTOR_VALUES_ADD_CONTROL,
         payload: { controlRef: newControlRef, value: newValue }
     }, providers);
-    var changedControls = getControlBranch(newControlRef, ancestorsUpdated).reduce(function (acc, control) {
+    var _changedControls = getControlBranch(newControlRef, ancestorsUpdated).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
     }, {});
     return {
         form: ancestorsUpdated,
-        changedControls: __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), changedControls),
-        removedControls: mergeChanges ? state.removedControls || {} : undefined
+        _changedControls: __assign(__assign({}, (mergeChanges ? state._changedControls || {} : undefined)), _changedControls),
+        _removedConrols: mergeChanges ? state._removedConrols || {} : undefined
     };
 };
 
@@ -666,6 +710,7 @@ var markControlAsPristine = function (state, action, mergeChanges) {
     if (mergeChanges === void 0) { mergeChanges = false; }
     var form = state.form;
     var controlRef = action.payload;
+    controlRefCheck(controlRef);
     var descendants = getDescendantControls(controlRef, form).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[getFormKey(control.controlRef)] = __assign(__assign({}, control), { dirty: false, pristineValue: control.value }), _a)));
@@ -677,21 +722,22 @@ var markControlAsPristine = function (state, action, mergeChanges) {
             payload: controlRef
         });
     }
-    var changedControls = getControlBranch(controlRef, result).reduce(function (acc, control) {
+    var _changedControls = getControlBranch(controlRef, result).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
     }, {});
     return {
         form: result,
-        changedControls: __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), changedControls),
-        removedControls: mergeChanges ? state.removedControls || {} : undefined
+        _changedControls: __assign(__assign({}, (mergeChanges ? state._changedControls || {} : undefined)), _changedControls),
+        _removedConrols: mergeChanges ? state._removedConrols || {} : undefined
     };
 };
 
 var markControlAsTouched = function (state, action, mergeChanges) {
     if (mergeChanges === void 0) { mergeChanges = false; }
     var form = state.form;
-    var _a = action.payload, controlRef = _a.controlRef, markAll = _a.markAll;
+    var _a = action.payload, controlRef = _a.controlRef, _b = _a.markAll, markAll = _b === void 0 ? false : _b;
+    controlRefCheck(controlRef);
     var controls = (markAll ? getControlBranch(controlRef, form) : getAncestorControls(controlRef, form)).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[getFormKey(control.controlRef)] = __assign(__assign({}, control), { touched: true }), _a)));
@@ -700,14 +746,14 @@ var markControlAsTouched = function (state, action, mergeChanges) {
         form: __assign(__assign({}, form), controls),
         action: action
     };
-    var changedControls = getControlBranch(controlRef, result.form).reduce(function (acc, control) {
+    var _changedControls = getControlBranch(controlRef, result.form).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
     }, {});
     return {
         form: __assign(__assign({}, form), controls),
-        changedControls: __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), changedControls),
-        removedControls: mergeChanges ? state.removedControls || {} : undefined
+        _changedControls: __assign(__assign({}, (mergeChanges ? state._changedControls || {} : undefined)), _changedControls),
+        _removedConrols: mergeChanges ? state._removedConrols || {} : undefined
     };
 };
 
@@ -716,6 +762,7 @@ var markControlAsUntouched = function (state, action, mergeChanges) {
     if (mergeChanges === void 0) { mergeChanges = false; }
     var form = state.form;
     var controlRef = action.payload;
+    controlRefCheck(controlRef);
     var result = getDescendantControls(controlRef, form).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[getFormKey(control.controlRef)] = __assign(__assign({}, control), { touched: false }), _a)));
@@ -729,14 +776,14 @@ var markControlAsUntouched = function (state, action, mergeChanges) {
         key = getFormKey(currentRef);
         result = __assign(__assign({}, result), (_a = {}, _a[key] = __assign(__assign({}, result[key]), { touched: getDescendantControls(currentRef, result, true).some(function (control) { return control.touched; }) }), _a));
     }
-    var changedControls = getControlBranch(controlRef, result).reduce(function (acc, control) {
+    var _changedControls = getControlBranch(controlRef, result).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
     }, {});
     return {
         form: result,
-        changedControls: __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), changedControls),
-        removedControls: mergeChanges ? state.removedControls || {} : undefined
+        _changedControls: __assign(__assign({}, (mergeChanges ? state._changedControls || {} : undefined)), _changedControls),
+        _removedConrols: mergeChanges ? state._removedConrols || {} : undefined
     };
 };
 
@@ -745,6 +792,7 @@ var resetControl = function (state, action, providers, mergeChanges) {
     if (mergeChanges === void 0) { mergeChanges = false; }
     var form = state.form;
     var controlRef = action.payload;
+    controlRefCheck(controlRef);
     var controlToReset = getControl(controlRef, form);
     var descendantsRemoved = __assign({}, form);
     var descendants = getDescendantControls(controlRef, form);
@@ -762,24 +810,24 @@ var resetControl = function (state, action, providers, mergeChanges) {
         type: UPDATE_ANCESTOR_VALUES,
         payload: { controlRef: controlRef, value: restoredControlValue }
     }, providers);
-    var changedControls = __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), getControlBranch(controlRef, result).reduce(function (acc, control) {
+    var _changedControls = __assign(__assign({}, (mergeChanges ? state._changedControls || {} : undefined)), getControlBranch(controlRef, result).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
     }, {}));
-    var removedControls = __assign(__assign({}, (mergeChanges ? state.removedControls || {} : undefined)), (_a = {}, _a[controlToReset.key] = controlToReset, _a));
-    // If control is removed, we can delete it from the changedControls check
+    var _removedConrols = __assign(__assign({}, (mergeChanges ? state._removedConrols || {} : undefined)), (_a = {}, _a[controlToReset.key] = controlToReset, _a));
+    // If control is removed, we can delete it from the _changedControls check
     descendants
         .map(function (_a) {
         var key = _a.key;
         return key;
     })
         .forEach(function (key) {
-        delete changedControls[key];
+        delete _changedControls[key];
     });
     return {
         form: result,
-        changedControls: changedControls,
-        removedControls: removedControls
+        _changedControls: _changedControls,
+        _removedConrols: _removedConrols
     };
 };
 
@@ -937,26 +985,26 @@ var mergeRemoveControl = function (state, form, controlRef) {
     }, {});
     var updatedControlBranchOrderRestored = reverseObjectKeys(updatedControlBranch);
     var descendants = existingBranch.filter(function (control) { return control.controlRef.length > parentRef.length; });
-    var removedControls = __assign({}, state);
+    var _removedConrols = __assign({}, state);
     descendants.forEach(function (control) {
-        delete removedControls[getFormKey(control.controlRef)];
+        delete _removedConrols[getFormKey(control.controlRef)];
     });
-    delete removedControls[getFormKey(controlRef)];
-    return __assign(__assign({}, removedControls), updatedControlBranchOrderRestored);
+    delete _removedConrols[getFormKey(controlRef)];
+    return __assign(__assign({}, _removedConrols), updatedControlBranchOrderRestored);
 };
 
 var hasErrors = function (errors) {
     return Object.values(errors).some(function (hasError) { return hasError; });
 };
 var mergeControls = function (state, _a) {
-    var form = _a.form, _b = _a.changedControls, changedControls = _b === void 0 ? {} : _b, removedControls = _a.removedControls;
-    var controlsRemoved = removedControls
-        ? Object.values(removedControls).reduce(function (acc, _a) {
+    var form = _a.form, _b = _a._changedControls, _changedControls = _b === void 0 ? {} : _b, _removedConrols = _a._removedConrols;
+    var controlsRemoved = _removedConrols
+        ? Object.values(_removedConrols).reduce(function (acc, _a) {
             var controlRef = _a.controlRef;
             return mergeRemoveControl(acc, form, controlRef);
         }, state)
         : state;
-    var updatedBranch = Object.values(changedControls)
+    var updatedBranch = Object.values(_changedControls)
         .reverse()
         .reduce(function (acc, control) {
         var _a;
@@ -1149,6 +1197,8 @@ exports.Validators = index;
 exports.array = array;
 exports.build = build;
 exports.control = control;
+exports.getAncestorControls = getAncestorControls;
 exports.getArrayItems = getArrayItems;
+exports.getDescendantControls = getDescendantControls;
 exports.group = group;
 exports.load = load;

package/package.json

@@ -14,7 +14,7 @@
   "author": "David Lai",
   "license": "ISC",
   "dependencies": {
-    "@reactables/core": "^1.0.0-beta.5",
+    "@reactables/core": "^1.0.0",
     "lodash.isequal": "^4.5.0"
   },
   "peerDependencies": {
@@ -23,5 +23,5 @@
   "devDependencies": {
     "lodash.clonedeep": "^4.5.0"
   },
-  "version": "1.0.0-beta.5"
+  "version": "1.0.0"
 }