@reactables/forms 0.5.4-alpha.0 → 0.7.0-alpha.0

package/dist/index.js

@@ -79,6 +79,18 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __spreadArray(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -171,71 +183,10 @@ var buildFormState = function (config, form, controlRef) {
     if (form === void 0) { form = { root: null }; }
     if (controlRef === void 0) { controlRef = []; }
     return {
-        form: buildState(config, form, controlRef),
-        action: null
+        form: buildState(config, form, controlRef)
     };
 };
 
-var getControl = function (controlRef, form) {
-    return form[getFormKey(controlRef)];
-};
-
-// Includes the original control of interest unless excludeSelf === true
-var getAncestorControls = function (controlRef, form, excludeSelf) {
-    if (excludeSelf === void 0) { excludeSelf = false; }
-    var formControls = controlRef.reduce(function (acc, key) {
-        var currentRef = acc.currentRef.concat(key);
-        var formControls = acc.formControls.concat(getControl(currentRef, form));
-        return {
-            currentRef: currentRef,
-            formControls: formControls
-        };
-    }, {
-        currentRef: [],
-        formControls: []
-    }).formControls;
-    var root = form['root'];
-    var result = [root].concat(formControls);
-    return result.filter(function (control) {
-        return excludeSelf ? getFormKey(control.controlRef) !== getFormKey(controlRef) : true;
-    });
-};
-
-// Includes the original control of interest unless excludeSelf === true
-var getDescendantControls = function (controlRef, form, excludeSelf) {
-    if (excludeSelf === void 0) { excludeSelf = false; }
-    if (!controlRef.length) {
-        return Object.values(form).filter(function (_a) {
-            var controlRef = _a.controlRef;
-            return excludeSelf ? controlRef.length !== 0 : true;
-        });
-    }
-    var control = getControl(controlRef, form);
-    var value = control.value, config = control.config;
-    var descendants;
-    if (Array.isArray(config.controls)) {
-        // If control is a Form Array
-        descendants = value.reduce(function (acc, item, index) {
-            return acc.concat(getDescendantControls(controlRef.concat(index), form));
-        }, []);
-    }
-    else if (config.controls) {
-        // If control is a Form Group
-        descendants = Object.keys(value).reduce(function (acc, key) {
-            return acc.concat(getDescendantControls(controlRef.concat(key), form));
-        }, []);
-    }
-    if (excludeSelf)
-        return descendants;
-    return [control].concat(descendants || []);
-};
-
-var getControlBranch = function (controlRef, form) {
-    var ancestors = getAncestorControls(controlRef, form);
-    var childControls = getDescendantControls(controlRef, form).slice(1);
-    return ancestors.concat(childControls).sort(function (a, b) { return a.controlRef.length - b.controlRef.length; });
-};
-
 var getScopedEffectsForControl = function (formControl) {
     var config = formControl.config, key = formControl.key;
     var asyncValidators = config.asyncValidators;
@@ -270,44 +221,21 @@ var getAsyncValidationActions = function (formControls) {
     }, []);
 };
 
-var buildHub2Source = function (rx) {
-    var hub1StateMapped$ = rx.state$.pipe(operators.map(function (payload) { return ({ type: 'formChange', payload: payload }); }));
+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 _a = formChangeAction.payload, form = _a.form, action = _a.action;
-        var newForm = form;
-        var controlsToCheck;
-        switch (action === null || action === void 0 ? void 0 : action.type) {
-            case 'updateValues':
-                controlsToCheck = getControlBranch(action.payload.controlRef, newForm);
-                break;
-            case 'pushControl':
-            case 'addControl':
-                var changedControl = getControl(action.payload.controlRef, newForm);
-                if (Array.isArray(changedControl.config.controls)) {
-                    var index = changedControl.value.length - 1;
-                    var ref = action.payload.controlRef.concat(index);
-                    controlsToCheck = getControlBranch(ref, newForm);
-                    break;
-                }
-                else {
-                    controlsToCheck = getControlBranch(action.payload.controlRef, newForm);
-                    break;
-                }
-            case 'removeControl':
-                controlsToCheck = getAncestorControls(action.payload.slice(0, -1), newForm);
-                break;
-            case 'resetControl':
-                controlsToCheck = getControlBranch(action.payload, newForm);
-                break;
-            default:
-                controlsToCheck = [];
-        }
+        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));
     }));
     return sourceForHub2$;
 };
 
+var getControl = function (controlRef, form) {
+    return form[getFormKey(controlRef)];
+};
+
 var UPDATE_ANCESTOR_VALUES = 'UPDATE_ANCESTOR_VALUES';
 var updateAncestorValues = function (form, _a) {
     var _b, _c;
@@ -342,17 +270,71 @@ var isChildRef = function (controlRef, parentRef) {
         controlRef.length === parentRef.length + 1);
 };
 
+// Includes the original control of interest unless excludeSelf === true
+var getDescendantControls = function (controlRef, form, excludeSelf) {
+    if (excludeSelf === void 0) { excludeSelf = false; }
+    if (!controlRef.length) {
+        return Object.values(form).filter(function (_a) {
+            var controlRef = _a.controlRef;
+            return excludeSelf ? controlRef.length !== 0 : true;
+        });
+    }
+    var control = getControl(controlRef, form);
+    var value = control.value, config = control.config;
+    var descendants;
+    if (Array.isArray(config.controls)) {
+        // If control is a Form Array
+        descendants = value.reduce(function (acc, item, index) {
+            return acc.concat(getDescendantControls(controlRef.concat(index), form));
+        }, []);
+    }
+    else if (config.controls) {
+        // If control is a Form Group
+        descendants = Object.keys(value).reduce(function (acc, key) {
+            return acc.concat(getDescendantControls(controlRef.concat(key), form));
+        }, []);
+    }
+    if (excludeSelf)
+        return descendants;
+    return [control].concat(descendants || []);
+};
+
+// Includes the original control of interest unless excludeSelf === true
+var getAncestorControls = function (controlRef, form, excludeSelf) {
+    if (excludeSelf === void 0) { excludeSelf = false; }
+    var formControls = controlRef.reduce(function (acc, key) {
+        var currentRef = acc.currentRef.concat(key);
+        var formControls = acc.formControls.concat(getControl(currentRef, form));
+        return {
+            currentRef: currentRef,
+            formControls: formControls
+        };
+    }, {
+        currentRef: [],
+        formControls: []
+    }).formControls;
+    var root = form['root'];
+    var result = [root].concat(formControls);
+    return result.filter(function (control) {
+        return excludeSelf ? getFormKey(control.controlRef) !== getFormKey(controlRef) : true;
+    });
+};
+
 var UPDATE_DESCENDANT_VALUES = 'UPDATE_DESCENDANT_VALUES';
-var updateDescendants = function (form, _a) {
+var updateDescendants = function (state, _a) {
     var _b = _a.payload, controlRef = _b.controlRef, value = _b.value;
-    var descendants = getDescendantControls(controlRef, form, true).map(function (control) { return [getFormKey(control.controlRef), control]; });
+    var descendants = getDescendantControls(controlRef, state.form, true).map(function (control) { return [getFormKey(control.controlRef), control]; });
     var result = descendants.reduce(function (acc, _a) {
-        var _b;
+        var _b, _c;
         var key = _a[0], control = _a[1];
         if (isChildRef(control.controlRef, controlRef)) {
             var childValue = value[control.controlRef.at(-1)];
             var validatorErrors = getErrors(control, value);
-            acc = __assign(__assign({}, acc), (_b = {}, _b[key] = __assign(__assign({}, control), { value: childValue, validatorErrors: validatorErrors, dirty: !isEqual__default["default"](childValue, control.pristineValue) }), _b));
+            var newControl = __assign(__assign({}, control), { value: childValue, validatorErrors: validatorErrors, dirty: !isEqual__default["default"](childValue, control.pristineValue) });
+            acc = {
+                form: __assign(__assign({}, acc.form), (_b = {}, _b[key] = newControl, _b)),
+                changedControls: __assign(__assign({}, acc.changedControls), (_c = {}, _c[newControl.key] = newControl, _c))
+            };
             var configControls = control.config.controls;
             if (configControls) {
                 acc = updateDescendants(acc, {
@@ -362,38 +344,56 @@ var updateDescendants = function (form, _a) {
             }
         }
         return acc;
-    }, form);
-    return result;
+    }, { form: {}, changedControls: {} });
+    return {
+        form: __assign(__assign({}, state.form), result.form),
+        changedControls: __assign({}, result.changedControls)
+    };
 };
 // Will only update child controls that are present.
-// Use AddControl/RemoveControl action reducers to add/remove control
-var updateValues = function (_a, action) {
-    var _b;
-    var form = _a.form;
-    var _c = action.payload, controlRef = _c.controlRef, value = _c.value;
+// Use AddControlPayload/RemoveControl action reducers to add/remove control
+var updateValues = function (_a, action, mergeChanges) {
+    var _b, _c;
+    var form = _a.form, _d = _a.changedControls, changedControls = _d === void 0 ? {} : _d, _e = _a.removedControls, removedControls = _e === void 0 ? {} : _e;
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var _f = action.payload, controlRef = _f.controlRef, value = _f.value;
     // Update its own value
     var ctrlKey = getFormKey(controlRef);
-    var validatorErrors = getErrors(form[ctrlKey], value);
-    var result = __assign(__assign({}, form), (_b = {}, _b[ctrlKey] = __assign(__assign({}, form[ctrlKey]), { validatorErrors: validatorErrors, dirty: !isEqual__default["default"](value, form[ctrlKey].pristineValue), value: value }), _b));
-    var configControls = form[ctrlKey].config.controls;
+    var newValue = value;
+    var config = form[ctrlKey].config;
+    if (config.normalizers) {
+        newValue = config.normalizers.reduce(function (acc, normalizer) { return normalizer(acc); }, value);
+    }
+    var validatorErrors = getErrors(form[ctrlKey], newValue);
+    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)
+    };
+    var configControls = config.controls;
     // Update its children
     if (configControls) {
         result = updateDescendants(result, {
             type: UPDATE_DESCENDANT_VALUES,
             payload: {
                 controlRef: controlRef,
-                value: value
+                value: newValue
             }
         });
     }
     // Update its Ancestors
     if (controlRef.length) {
-        result = updateAncestorValues(result, {
-            type: UPDATE_ANCESTOR_VALUES,
-            payload: { controlRef: controlRef, value: value }
-        });
+        result = __assign(__assign({}, result), { form: updateAncestorValues(result.form, {
+                type: UPDATE_ANCESTOR_VALUES,
+                payload: { controlRef: controlRef, value: newValue }
+            }) });
     }
-    return { form: result, action: action };
+    var changedAncestorControls = getAncestorControls(controlRef, result.form).reduce(function (acc, control) {
+        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 });
+    return mergedResult;
 };
 
 var UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL = 'UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL';
@@ -424,18 +424,22 @@ var updateAncestorValuesRemoveControl = function (form, _a) {
     return form;
 };
 
-var removeControl = function (_a, action) {
-    var form = _a.form;
+var removeControl = function (state, action, mergeChanges) {
+    var _a;
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var form = state.form;
     var controlRef = action.payload;
-    if (!getControl(controlRef, form)) {
+    var controlToRemove = getControl(controlRef, form);
+    if (!controlToRemove) {
         throw 'Control not found';
     }
     // Can't remove the root of the form
     if (!controlRef.length)
-        return { form: form, action: action };
+        return { form: form };
     var parentRef = controlRef.slice(0, -1);
     var parentIsFormArray = Array.isArray(getControl(parentRef, form).config.controls);
-    var descendantkeys = getDescendantControls(controlRef, form).map(function (_a) {
+    var descendants = getDescendantControls(controlRef, form);
+    var descendantkeys = descendants.map(function (_a) {
         var controlRef = _a.controlRef;
         return getFormKey(controlRef);
     });
@@ -466,12 +470,50 @@ var removeControl = function (_a, action) {
         }
         return __assign(__assign({}, acc), (_c = {}, _c[key] = control, _c));
     }, {});
+    var result = updateAncestorValuesRemoveControl(controlRemoved, {
+        type: UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL,
+        payload: controlRef
+    });
+    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) {
+            var _b, _c;
+            var key = _a[0], control = _a[1];
+            var oldIndex = control.controlRef.at(parentRef.length);
+            if (
+            // If control is descendant.
+            parentRef.every(function (ref, index) { return control.controlRef[index] === ref; }) &&
+                control.controlRef.length > parentRef.length &&
+                // If the array item index was greater than the index of item removed
+                // we need to decrement its index by 1.
+                oldIndex > controlRef.at(-1)) {
+                var newRef = parentRef
+                    .concat(oldIndex - 1)
+                    .concat(control.controlRef.slice(parentRef.length + 1));
+                return __assign(__assign({}, acc), (_b = {}, _b[getFormKey(newRef)] = __assign(__assign({}, control), { controlRef: newRef }), _b));
+            }
+            else {
+                return __assign(__assign({}, acc), (_c = {}, _c[key] = control, _c));
+            }
+        }, {});
+    }
+    var removedControls = __assign(__assign({}, (mergeChanges ? state.removedControls || {} : undefined)), (_a = {}, _a[controlToRemove.key] = controlToRemove, _a));
+    descendants
+        .map(function (_a) {
+        var key = _a.key;
+        return key;
+    })
+        .forEach(function (key) {
+        delete changedControls[key];
+    });
     return {
-        form: updateAncestorValuesRemoveControl(controlRemoved, {
-            type: UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL,
-            payload: controlRef
-        }),
-        action: action
+        form: result,
+        changedControls: changedControls,
+        removedControls: removedControls
     };
 };
 
@@ -502,31 +544,38 @@ var updateAncestorValuesAddControl = function (form, _a) {
     return form;
 };
 
-var addControl = function (state, action) {
-    var newControlRef;
+var getControlBranch = function (controlRef, form) {
+    var ancestors = getAncestorControls(controlRef, form);
+    var childControls = getDescendantControls(controlRef, form).slice(1);
+    return ancestors.concat(childControls).sort(function (a, b) { return a.controlRef.length - b.controlRef.length; });
+};
+
+var addControl = function (state, action, mergeChanges) {
+    if (mergeChanges === void 0) { mergeChanges = false; }
     var _a = action.payload, config = _a.config, controlRef = _a.controlRef;
-    var existingControl = getControl(controlRef, state.form);
-    // If controlRef exists we are adding control to a Form Array
-    if (existingControl && Array.isArray(existingControl.config.controls)) {
-        newControlRef = controlRef.concat(existingControl.value.length);
+    // 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';
     }
-    else {
-        // 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';
-        }
-        newControlRef = controlRef;
-    }
-    var newForm = buildState(config, state.form, newControlRef);
-    var newValue = getControl(newControlRef, newForm).value;
+    var newForm = buildState(config, state.form, controlRef);
+    var newValue = getControl(controlRef, newForm).value;
     var ancestorsUpdated = updateAncestorValuesAddControl(newForm, {
         type: UPDATE_ANCESTOR_VALUES_ADD_CONTROL,
-        payload: { controlRef: newControlRef, value: newValue }
+        payload: { controlRef: controlRef, value: newValue }
     });
-    return { form: ancestorsUpdated, action: action };
+    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
+    };
 };
 
-var pushControl = function (state, action) {
+var pushControl = function (state, action, mergeChanges) {
+    if (mergeChanges === void 0) { mergeChanges = false; }
     var newControlRef;
     var _a = action.payload, config = _a.config, controlRef = _a.controlRef;
     var existingControl = getControl(controlRef, state.form);
@@ -545,7 +594,15 @@ var pushControl = function (state, action) {
         type: UPDATE_ANCESTOR_VALUES_ADD_CONTROL,
         payload: { controlRef: newControlRef, value: newValue }
     });
-    return { form: ancestorsUpdated, action: action };
+    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
+    };
 };
 
 // Same implementation as updateAncestor values except updating pristine values
@@ -584,8 +641,9 @@ var updateAncestorPristineValues = function (form, _a) {
     return form;
 };
 
-var markControlAsPristine = function (_a, action) {
-    var form = _a.form;
+var markControlAsPristine = function (state, action, mergeChanges) {
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var form = state.form;
     var controlRef = action.payload;
     var descendants = getDescendantControls(controlRef, form).reduce(function (acc, control) {
         var _a;
@@ -598,25 +656,44 @@ var markControlAsPristine = function (_a, action) {
             payload: controlRef
         });
     }
-    return { form: result, action: action };
+    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
+    };
 };
 
-var markControlAsTouched = function (_a, action) {
-    var form = _a.form;
-    var _b = action.payload, controlRef = _b.controlRef, markAll = _b.markAll;
+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 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)));
     }, {});
-    return {
+    var result = {
         form: __assign(__assign({}, form), controls),
         action: action
     };
+    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
+    };
 };
 
-var markControlAsUntouched = function (_a, action) {
-    var _b;
-    var form = _a.form;
+var markControlAsUntouched = function (state, action, mergeChanges) {
+    var _a;
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var form = state.form;
     var controlRef = action.payload;
     var result = getDescendantControls(controlRef, form).reduce(function (acc, control) {
         var _a;
@@ -629,32 +706,59 @@ var markControlAsUntouched = function (_a, action) {
     while (currentRef.length > 0) {
         currentRef = currentRef.slice(0, -1);
         key = getFormKey(currentRef);
-        result = __assign(__assign({}, result), (_b = {}, _b[key] = __assign(__assign({}, result[key]), { touched: getDescendantControls(currentRef, result, true).some(function (control) { return control.touched; }) }), _b));
+        result = __assign(__assign({}, result), (_a = {}, _a[key] = __assign(__assign({}, result[key]), { touched: getDescendantControls(currentRef, result, true).some(function (control) { return control.touched; }) }), _a));
     }
-    return { form: result, action: action };
+    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
+    };
 };
 
-var resetControl = function (_a, action) {
-    var form = _a.form;
+var resetControl = function (state, action, mergeChanges) {
+    var _a;
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var form = state.form;
     var controlRef = action.payload;
     var controlToReset = getControl(controlRef, form);
+    var descendantsRemoved = __assign({}, form);
     var descendants = getDescendantControls(controlRef, form);
+    var descendantKeys = descendants.map(function (_a) {
+        var controlRef = _a.controlRef;
+        return getFormKey(controlRef);
+    });
+    descendantKeys.forEach(function (key) {
+        delete descendantsRemoved[key];
+    });
     // Remove all descendants
-    var descendantsRemoved = Object.entries(form).reduce(function (acc, _a) {
-        var _b;
-        var key = _a[0], control = _a[1];
-        if (descendants.includes(control))
-            return acc;
-        return __assign(__assign({}, acc), (_b = {}, _b[key] = control, _b));
-    }, {});
     var restoredControls = buildState(controlToReset.config, descendantsRemoved, controlToReset.controlRef);
     var restoredControlValue = getControl(controlRef, restoredControls).value;
+    var result = updateAncestorValues(restoredControls, {
+        type: UPDATE_ANCESTOR_VALUES,
+        payload: { controlRef: controlRef, value: restoredControlValue }
+    });
+    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
+    descendants
+        .map(function (_a) {
+        var key = _a.key;
+        return key;
+    })
+        .forEach(function (key) {
+        delete changedControls[key];
+    });
     return {
-        form: updateAncestorValues(restoredControls, {
-            type: UPDATE_ANCESTOR_VALUES,
-            payload: { controlRef: controlRef, value: restoredControlValue }
-        }),
-        action: action
+        form: result,
+        changedControls: changedControls,
+        removedControls: removedControls
     };
 };
 
@@ -672,7 +776,7 @@ var asyncValidation = function (form, _a) {
     return __assign(__assign({}, form), updatedSelfAndAncestors);
 };
 
-var hasErrors$4 = function (errors) {
+var hasErrors$3 = function (errors) {
     return Object.values(errors).some(function (hasError) { return hasError; });
 };
 var mergeBranchErrors = function (form, controlRef) {
@@ -686,7 +790,7 @@ var mergeBranchErrors = function (form, controlRef) {
         var _b;
         var key = _a[0], control = _a[1];
         var errors = __assign(__assign({}, control.validatorErrors), control.asyncValidatorErrors);
-        var selfValid = !hasErrors$4(errors);
+        var selfValid = !hasErrors$3(errors);
         var childrenValid = true;
         if (Array.isArray(control.config.controls)) {
             // If control is a FormArray
@@ -738,7 +842,7 @@ var asyncValidationResponseSuccess = function (form, _a) {
     return mergeBranchErrors(ancestorsUpdated, control.controlRef);
 };
 
-var hasErrors$3 = function (errors) {
+var hasErrors$2 = function (errors) {
     return Object.values(errors).some(function (hasError) { return hasError; });
 };
 // TODO: update merge errors to not do the entire form but just a subset of it
@@ -750,7 +854,7 @@ var mergeErrors = function (form) {
         var _b;
         var key = _a[0], control = _a[1];
         var errors = __assign(__assign({}, control.validatorErrors), control.asyncValidatorErrors);
-        var selfValid = !hasErrors$3(errors);
+        var selfValid = !hasErrors$2(errors);
         var childrenValid = true;
         if (Array.isArray(control.config.controls)) {
             // If control is a FormArray
@@ -771,40 +875,6 @@ var mergeErrors = function (form) {
     return restoredOrder;
 };
 
-var hasErrors$2 = function (errors) {
-    return Object.values(errors).some(function (hasError) { return hasError; });
-};
-var mergeValueUpdated = function (state, form, controlRef) {
-    var controlBranch = getControlBranch(controlRef, form)
-        .reverse()
-        .reduce(function (acc, control) {
-        var _a;
-        var key = getFormKey(control.controlRef);
-        var existingControl = state[key] || structuredClone(DEFAULT_HUB2_FIELDS);
-        var errors = __assign(__assign({}, control.validatorErrors), existingControl.asyncValidatorErrors);
-        var selfValid = !hasErrors$2(errors);
-        var childrenValid = true;
-        if (Array.isArray(control.config.controls)) {
-            // If control is a FormArray
-            childrenValid = control.value.every(function (item, index) {
-                var formKey = getFormKey(control.controlRef.concat(index));
-                var valid = acc[formKey] === undefined ? state[formKey].valid : acc[formKey].valid;
-                return valid;
-            });
-        }
-        else if (control.config.controls) {
-            // If control is a FormGroup
-            childrenValid = Object.keys(control.value).every(function (childKey) {
-                var formKey = getFormKey(control.controlRef.concat(childKey));
-                var valid = acc[formKey] === undefined ? state[formKey].valid : acc[formKey].valid;
-                return valid;
-            });
-        }
-        return __assign(__assign({}, acc), (_a = {}, _a[key] = __assign(__assign(__assign({}, existingControl), control), { errors: errors, valid: selfValid && childrenValid, childrenValid: childrenValid }), _a));
-    }, {});
-    return __assign(__assign({}, state), controlBranch);
-};
-
 var hasErrors$1 = function (errors) {
     return Object.values(errors).some(function (hasError) { return hasError; });
 };
@@ -848,70 +918,55 @@ var mergeRemoveControl = function (state, form, controlRef) {
     return __assign(__assign({}, removedControls), updatedControlBranch);
 };
 
-var mergeTouchUpdated = function (state, form, controlRef) {
-    var controlBranch = getControlBranch(controlRef, form).reduce(function (acc, control) {
-        var _a;
-        var key = getFormKey(control.controlRef);
-        return __assign(__assign({}, acc), (_a = {}, _a[key] = __assign(__assign({}, state[key]), control), _a));
-    }, {});
-    return __assign(__assign({}, state), controlBranch);
-};
-
 var hasErrors = function (errors) {
     return Object.values(errors).some(function (hasError) { return hasError; });
 };
-var mergePushControl = function (state, form, controlRef) {
-    var baseFormArray = getControl(controlRef, form);
-    //If Form Array
-    // use the added control  (last index)
-    // merge descendants with default stuff
-    var newItemIndex = baseFormArray.value.length - 1;
-    var descendants = getDescendantControls(controlRef.concat(newItemIndex), form);
-    var mergedDescendants = mergeErrors(descendants.reduce(function (acc, control) {
-        var _a;
-        var formKey = getFormKey(control.controlRef);
-        return __assign(__assign({}, acc), (_a = {}, _a[formKey] = __assign(__assign({}, control), structuredClone(DEFAULT_HUB2_FIELDS)), _a));
-    }, {}));
-    var ancestors = getAncestorControls(controlRef, state)
+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 controlRef = _a.controlRef;
+            return mergeRemoveControl(acc, form, controlRef);
+        }, state)
+        : state;
+    var updatedBranch = Object.values(changedControls)
         .reverse()
-        .reduce(function (acc, control, index, arr) {
+        .reduce(function (acc, control) {
         var _a;
         var formKey = getFormKey(control.controlRef);
-        var errors = __assign(__assign({}, form[formKey].validatorErrors), control.asyncValidatorErrors);
+        var existingControl = controlsRemoved && controlsRemoved[formKey];
+        var newControl = __assign(__assign({}, (existingControl
+            ? existingControl
+            : structuredClone(DEFAULT_HUB2_FIELDS))), control);
+        var errors = __assign(__assign({}, newControl.validatorErrors), newControl.asyncValidatorErrors);
         var selfValid = !hasErrors(errors);
         var childrenValid = true;
-        if (index === 0) {
-            childrenValid =
-                control.childrenValid &&
-                    mergedDescendants[getFormKey(controlRef.concat(newItemIndex))].valid;
+        if (Array.isArray(control.config.controls)) {
+            // If control is a FormArray
+            childrenValid = control.value.every(function (item, index) {
+                var formKey = getFormKey(control.controlRef.concat(index));
+                var valid = acc[formKey] === undefined ? controlsRemoved[formKey].valid : acc[formKey].valid;
+                return valid;
+            });
         }
-        else {
-            if (Array.isArray(control.config.controls)) {
-                // If control is a FormArray
-                childrenValid = control.value.every(function (item, index) {
-                    var formKey = getFormKey(control.controlRef.concat(index));
-                    var valid = acc[formKey] === undefined ? state[formKey].valid : acc[formKey].valid;
-                    return valid;
-                });
-            }
-            else if (control.config.controls) {
-                // If control is a FormGroup
-                childrenValid = Object.keys(control.value).every(function (childKey) {
-                    var formKey = getFormKey(control.controlRef.concat(childKey));
-                    var valid = acc[formKey] === undefined ? state[formKey].valid : acc[formKey].valid;
-                    return valid;
-                });
-            }
+        else if (control.config.controls) {
+            // If control is a FormGroup
+            childrenValid = Object.keys(control.value).every(function (childKey) {
+                var formKey = getFormKey(control.controlRef.concat(childKey));
+                var valid = acc[formKey] === undefined ? controlsRemoved[formKey].valid : acc[formKey].valid;
+                return valid;
+            });
         }
-        return __assign(__assign({}, acc), (_a = {}, _a[formKey] = __assign(__assign(__assign({}, control), form[formKey]), { errors: errors, valid: selfValid && childrenValid, childrenValid: childrenValid }), _a));
+        return __assign(__assign({}, acc), (_a = {}, _a[formKey] = __assign(__assign({}, newControl), { errors: errors, valid: selfValid && childrenValid, childrenValid: childrenValid }), _a));
     }, {});
-    var controlBranchUpdated = __assign(__assign({}, ancestors), mergedDescendants);
-    return __assign(__assign({}, state), controlBranchUpdated);
+    var result = __assign(__assign({}, controlsRemoved), updatedBranch);
+    return result;
 };
 
 var formChange = function (state, _a) {
     if (state === void 0) { state = null; }
-    var _b = _a.payload, form = _b.form, action = _b.action;
+    var payload = _a.payload;
+    var form = payload.form;
     if (state === null) {
         return mergeErrors(Object.entries(form).reduce(function (acc, _a) {
             var _b;
@@ -919,30 +974,7 @@ var formChange = function (state, _a) {
             return __assign(__assign({}, acc), (_b = {}, _b[dictKey] = __assign(__assign({}, structuredClone(DEFAULT_HUB2_FIELDS)), baseControl), _b));
         }, {}));
     }
-    switch (action === null || action === void 0 ? void 0 : action.type) {
-        case 'pushControl':
-            return mergePushControl(state, form, action.payload.controlRef);
-        case 'addControl':
-        case 'updateValues':
-            return mergeValueUpdated(state, form, action.payload.controlRef);
-        case 'resetControl':
-        case 'removeControl':
-            return mergeRemoveControl(state, form, action.payload);
-        case 'markControlAsPristine':
-        case 'markControlAsUntouched':
-            return mergeTouchUpdated(state, form, action.payload);
-        case 'markControlAsTouched':
-            return mergeTouchUpdated(state, form, action.payload.controlRef);
-        default:
-            return mergeErrors(Object.entries(form).reduce(function (acc, _a) {
-                var _b;
-                var dictKey = _a[0], baseControl = _a[1];
-                var existingControl = state && state[dictKey];
-                return __assign(__assign({}, acc), (_b = {}, _b[dictKey] = __assign(__assign({}, (existingControl
-                    ? existingControl
-                    : structuredClone(DEFAULT_HUB2_FIELDS))), baseControl), _b));
-            }, {}));
-    }
+    return mergeControls(state, payload);
 };
 
 var control = function (config) {
@@ -961,20 +993,52 @@ var control = function (config) {
 };
 var array = function (config) { return config; };
 var group = function (config) { return config; };
+var reducerTools = {
+    updateValues: function (state, payload) {
+        return updateValues(state, { payload: payload }, true);
+    },
+    removeControl: function (state, payload) {
+        return removeControl(state, { payload: payload }, true);
+    },
+    pushControl: function (state, payload) {
+        return pushControl(state, { payload: payload }, true);
+    },
+    addControl: function (state, payload) {
+        return addControl(state, { payload: payload }, true);
+    },
+    markControlAsPristine: function (state, payload) {
+        return markControlAsPristine(state, { payload: payload }, true);
+    },
+    markControlAsTouched: function (state, payload) {
+        return markControlAsTouched(state, { payload: payload }, true);
+    },
+    markControlAsUntouched: function (state, payload) {
+        return markControlAsUntouched(state, { payload: payload }, true);
+    },
+    resetControl: function (state, payload) {
+        return resetControl(state, { payload: payload }, true);
+    }
+};
 var build = function (config, options) {
+    if (options === void 0) { options = {}; }
     var initialState = buildFormState(config);
-    var rxHub1 = core.RxBuilder(__assign({ initialState: initialState, reducers: {
-            updateValues: updateValues,
-            removeControl: removeControl,
-            addControl: addControl,
-            pushControl: pushControl,
-            markControlAsPristine: markControlAsPristine,
-            markControlAsTouched: markControlAsTouched,
-            markControlAsUntouched: markControlAsUntouched,
-            resetControl: resetControl
-        } }, options));
-    var rxHub2 = core.RxBuilder({
-        sources: [buildHub2Source(rxHub1)],
+    var reducers = options.reducers, otherOptions = __rest(options, ["reducers"]);
+    var customReducers = Object.entries(reducers || {}).reduce(function (acc, _a) {
+        var _b;
+        var key = _a[0], _case = _a[1];
+        var _reducer = typeof _case === 'function' ? _case : _case.reducer;
+        var effects = typeof _case === 'function' ? [] : _case.effects;
+        return __assign(__assign({}, acc), (_b = {}, _b[key] = {
+            reducer: function (_a, action) {
+                var form = _a.form;
+                return _reducer(reducerTools, { form: form }, action);
+            },
+            effects: effects
+        }, _b));
+    }, {});
+    var _a = core.RxBuilder(__assign({ initialState: initialState, reducers: __assign({ updateValues: updateValues, removeControl: removeControl, addControl: addControl, pushControl: pushControl, markControlAsPristine: markControlAsPristine, markControlAsTouched: markControlAsTouched, markControlAsUntouched: markControlAsUntouched, resetControl: resetControl }, customReducers) }, otherOptions)), hub1State$ = _a[0], hub1Actions = _a[1];
+    var state$ = core.RxBuilder({
+        sources: [buildHub2Source(hub1State$)],
         initialState: null,
         reducers: {
             formChange: formChange,
@@ -987,11 +1051,11 @@ var build = function (config, options) {
             },
             asyncValidationResponseSuccess: asyncValidationResponseSuccess
         }
-    });
-    return {
-        state$: rxHub2.state$.pipe(operators.filter(function (form) { return form !== null; })),
-        actions: rxHub1.actions
-    };
+    })[0];
+    return [
+        state$.pipe(operators.filter(function (form) { return form !== null; })),
+        hub1Actions,
+    ];
 };
 
 var getArrayItems = function (controlRef, form) {