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

package/README.md

@@ -1,25 +1,33 @@
-# Reactable Forms (WIP)
+# Reactable Forms
 
 ## Description
 
-State Management of reactive forms with [Reactables](https://github.com/reactables/reactables/tree/main/packages/core).
+Reactive forms with [Reactables](https://github.com/reactables/reactables/tree/main/packages/core).
 
 ## Table of Contents
 
 1. [Installation](#installation)
-1. [Examples](#examples)
-    1. [Form Control](#form-control)
-    1. [Form Array](#form-array)
-    1. [Form Group](#form-group)
-
 1. [API](#api)
     1. [RxActions](#api-actions)
+        1. [updateValues](#api-actions-update-values)
+        1. [addControl](#api-actions-add-conrtrol)
+        1. [pushControl](#api-actions-push-control)
+        1. [removeControl](#api-actions-remove-control)
+        1. [markControlAsPristine](#api-actions-mark-as-pristine)
+        1. [markControlAsTouched](#api-actions-mark-as-touched)
+        1. [markControlAsUntouched](#api-actions-mark-as-untouched)
+        1. [resetControl](#api-actions-resetControl)
     1. [build](#api-build)
+        1. [RxFormOptions](#api-form-options)
     1. [control](#api-control)
     1. [group](#api-group)
     1. [array](#api-array)
-    1. [Other Interfaces](#interfaces)
-        1. [EffectsAndSources](#effects-sources)
+    1. [Other Interfaces](#api-interfaces)
+        1. [Form](#api-form)
+        1. [FormControl](#api-form-control)
+        1. [ControlRef](#api-control-ref)
+        1. [FormErrors](#api-form-errors)
+        1. [FormReducers](#api-form-reducers)
 
 
 ## Installation <a name="installation"></a>
@@ -28,10 +36,6 @@ Installation will require [RxJS](https://rxjs.dev/) if not already installed.
 
 `npm i rxjs @reactables/forms`
 
-## Examples <a name="examples"></a>
-
-WIP
-
 ## 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.
@@ -40,28 +44,130 @@ The API for building Reactable Forms is very similar to [Angular FormBuilder](ht
 
 Actions available to trigger state changes on Reactable.
 
+#### `updateValues` <a name="api-actions-update-values"></a>
+
+Updates value of a [`FormControl`](#api-form-control). For form group and form arrays, update will only occur if specified descendant controls exists. Otherwise it will throw an error.
+
+```typescript
+type updateValues = <T>(payload: UpdateValuesPayload<T>) => void;
+
+export interface UpdateValuesPayload<T> {
+  value: T;
+  controlRef: ControlRef;
+}
+
+```
+
+#### `addControl` <a name="api-actions-add-control"></a>
+
+Adds a control to a form group.
+
+```typescript
+type addControl = (payload: AddControlPayload) => void;
+
+export interface AddControlPayload {
+  config: AbstractControlConfig;
+  controlRef: ControlRef;
+}
+
+```
+
+#### `pushControl` <a name="api-actions-push-control"></a>
+
+Pushes a control to a form array.
+
+```typescript
+type pushControl = (payload: PushControlPayload) => void;
+
+export interface PushControlPayload {
+  config: AbstractControlConfig;
+  controlRef: ControlRef;
+}
+
+```
+
+#### `removeControl` <a name="api-actions-remove-control"></a>
+
+Removes a specified control from form.
+
+```typescript
+type removeControl = (payload: ControlRef) => void;
+
+```
+
+#### `markControlAsPristine` <a name="api-actions-mark-as-pristine"></a>
+
+Marks a control and all descendant controls as pristine.
+
+```typescript
+type markControlAsPristine = (payload: ControlRef) => void;
+
+```
+
+#### `markControlAsTouched` <a name="api-actions-mark-as-touched"></a>
+
+Marks a control and all ancestors as touched. Can pass a `markAll` true to mark all descendants as touched as well.
+
+```typescript
+type markControlAsTouched = (payload: MarkTouchedPayload) => void;
+
+export interface MarkTouchedPayload {
+  controlRef: ControlRef;
+  markAll?: boolean;
+}
+
+```
+
+#### `markControlAsUntouched` <a name="api-actions-mark-as-untouched"></a>
+
+Marks a control and all descendants as untouched. Will recheck ancestors controls and update touched status.
+
+```typescript
+type markControlAsUnTouched = (payload: ControlRef) => void;
+
+```
+
+#### `resetControl` <a name="api-actions-resetControl"></a>
+
+Marks a control and all descendants as untouched. Will recheck ancestors controls and update touched status.
+
 ```typescript
-type RxFormActions = {
-  updateValues: <T>(payload: ControlChange<T>) => void;
-  addControl: (payload: AddControl) => void;
-  pushControl: (payload: PushControl) => void;
-  removeControl: (payload: ControlRef) => void;
-  markControlAsPristine: (payload: ControlRef) => void;
-  markControlAsTouched: (payload: MarkTouched) => void;
-  markControlAsUntouched: (payload: ControlRef) => void;
-  resetControl: (payload: ControlRef) => void;
-};
+type resetControls = (payload: ControlRef) => void;
+
 ```
 
 ### `build` <a name="api-build"></a>
 
 ```typescript
-type build = (config: AbstractControlConfig, options?: EffectsAndSources) => Reactable<Form<unknown>, RxFormActions>
+type build = (config: AbstractControlConfig, options?: RxFormOptions) => Reactable<Form<unknown>, RxFormActions>
 ```
 
-Factory method for creating a form Reactable. Accepts a configuration object generated by one or more helper methods - [`control`](#api-control), [`group`](#api-group), [`array`](#api-array).
+Factory method for creating a form Reactable. Accepts a configuration object generated by one or more helper methods - [`control`](#api-control), [`group`](#api-group), [`array`](#api-array). Also accepts an `RxFormOptions` object.
+
+
+#### `RxFormOptions` <a name="api-form-options"></a>
+
+Options to customize RxForm behaviour.
 
-Options can also be provided to declare [Effects and Sources](#effects-sources) for the form Reactable.
+```typescript
+interface RxFormOptions {
+  reducers?: { [key:string]: CustomReducer }
+  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)**. |
+| 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. |
 
 ### `control` <a name="api-control"></a>
 
@@ -105,16 +211,85 @@ interface FormArrayConfig {
 }
 ```
 
-### Other Interfaces <a name="interfaces"></a>
+### Other Interfaces <a name="api-interfaces"></a>
+
+#### `Form` <a name="api-form"></a>
+Form state. Dictionary of [`FormControl`](#api-form-control)(s) where the key is a period separated representation of the [`ControlRef`](#api-control-ref) tuple.
 
-#### EffectsAndSources <a name="effects-sources"></a>
 ```typescript
-interface EffectsAndSources {
-  effects?: Effect<unknown, unknown>[];
-  sources?: Observable<Action<unknown>>[] | { [key: string]: Observable<unknown> };
+export interface Form<T> {
+  root?: FormControl<T>;
+  [key: string]: FormControl<unknown>;
+}
+
+```
+
+#### `FormControl` <a name="api-form-control"></a>
+
+```typescript
+
+export interface FormControl<T> extends BaseControl<T>, Hub2Fields {
+  pristineValue: T;
+  controlRef: ControlRef;
+  value: T;
+  dirty: boolean;
+  touched: boolean;
+  validatorErrors: FormErrors;
+  key: string;
+  asyncValidatorErrors: FormErrors;
+  asyncValidateInProgress: { [key: string | number]: boolean };
+  errors: FormErrors;
+  valid: boolean;
+  childrenValid: boolean;
+  pending?: boolean;
+  config: AbstractControlConfig;
 }
 ```
 | Property | Description |
 | -------- | ----------- |
-| 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 |
+| pristineValue  | Original value of control. Use to determine if control is dirty. |
+| controlRef  | Controls [`ControlRef`](#api-control-ref). |
+| value  | Control value. |
+| touched  | Touched status of control |
+| validatorErrors | [`FormErrors`](#api-form-errors) from validators (non-async) |
+| asyncValidatorErrors | [`FormErrors`](#api-form-errors) from async validators |
+| errors | [`FormErrors`](#api-form-errors) validatorErrors and asyncValidatorErrors merged. |
+| valid | Valid status of control. Also checks descendants.
+| childrenValid | Valid status of direct child controls.
+| config | Original config for form control |
+
+
+
+#### `ControlRef` <a name="api-control-ref"></a>
+
+Control Reference represented as a tuple for the [`FormControl`](#api-form-control)
+
+#### `FormErrors` <a name="api-form-errors"></a>
+
+Dictionary of errors for the control.
+
+```typescript
+export interface FormErrors {
+  [key: string]: boolean;
+}
+```
+
+#### `FormReducers` <a name="api-form-reducers"></a>
+
+Built in reducers to be used to update state of form tree. Payload and behaviour is same and descrbed in [`RxActions`](#api-actions); 
+
+```typescript
+
+export interface FormReducers {
+  updateValues: <T>(state: BaseFormState<T>, payload: UpdateValuesPayload<unknown>,
+  ) => BaseFormState<T>;
+  removeControl: <T>(state: BaseFormState<T>, payload: ControlRef) => BaseFormState<T>;
+  pushControl: <T>(state: BaseFormState<T>, payload: PushControlPayload) => BaseFormState<T>;
+  addControl: <T>(state: BaseFormState<T>, payload: AddControlPayload) => BaseFormState<T>;
+  markControlAsPristine: <T>(state: BaseFormState<T>, payload: ControlRef) => BaseFormState<T>;
+  markControlAsTouched: <T>(state: BaseFormState<T>, payload: MarkTouchedPayload) => BaseFormState<T>;
+  markControlAsUntouched: <T>(state: BaseFormState<T>, payload: ControlRef,
+  ) => BaseFormState<T>;
+  resetControl: <T>(state: BaseFormState<T>, payload: ControlRef) => BaseFormState<T>;
+}
+```

package/dist/Helpers/buildHub2Source.d.ts

@@ -1,4 +1,4 @@
 import { Observable } from 'rxjs';
-import { Action, Reactable } from '@reactables/core';
+import { Action } from '@reactables/core';
 import { BaseFormState } from '../Models/Controls';
-export declare const buildHub2Source: <T, S>(rx: Reactable<BaseFormState<T>, S>) => Observable<Action<T>>;
+export declare const buildHub2Source: <T, S>(hub1State$: Observable<BaseFormState<T>>) => Observable<Action<T>>;

package/dist/Models/Configs.d.ts

@@ -13,6 +13,7 @@ export interface FormArrayConfig extends ValidatorConfigs {
 }
 export interface FormControlConfig<T> extends ValidatorConfigs {
     initialValue: T;
+    normalizers?: ((value: T) => T)[];
 }
 export type AbstractControlConfig = (FormControlConfig<unknown> | FormArrayConfig | FormGroupConfig) & {
     controls?: AbstractControlConfig[] | {

package/dist/Models/Payloads.d.ts

@@ -1,15 +1,15 @@
 import { ControlRef } from './ControlRef';
 import { AbstractControlConfig } from './Configs';
 import { FormErrors } from './FormErrors';
-export interface ControlChange<T> {
+export interface UpdateValuesPayload<T> {
     value: T;
     controlRef: ControlRef;
 }
-export interface AddControl {
+export interface AddControlPayload {
     config: AbstractControlConfig;
     controlRef: ControlRef;
 }
-export interface PushControl {
+export interface PushControlPayload {
     config: AbstractControlConfig;
     controlRef: ControlRef;
 }
@@ -18,7 +18,7 @@ export interface ControlAsyncValidationResponse {
     validatorIndex: number;
     errors: FormErrors;
 }
-export interface MarkTouched {
+export interface MarkTouchedPayload {
     controlRef: ControlRef;
     markAll?: boolean;
 }

package/dist/Models/index.d.ts

@@ -2,5 +2,5 @@ export { AbstractControlConfig, FormArrayConfig, FormGroupConfig, FormControlCon
 export { ControlRef } from './ControlRef';
 export * as ControlModels from './Controls';
 export { FormErrors } from './FormErrors';
-export { ControlChange, AddControl, ControlAsyncValidationResponse, MarkTouched } from './Payloads';
+export { UpdateValuesPayload, AddControlPayload, ControlAsyncValidationResponse, MarkTouchedPayload, } from './Payloads';
 export { ValidatorAsyncFn, ValidatorFn } from './Validators';

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

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
-import { AddControl } from '../../Models/Payloads';
-export declare const addControl: <T>(state: BaseFormState<T>, action: Action<AddControl>, mergeChanges?: boolean) => BaseFormState<T>;
+import { AddControlPayload } from '../../Models/Payloads';
+export declare const addControl: <T>(state: BaseFormState<T>, action: Action<AddControlPayload>, mergeChanges?: boolean) => BaseFormState<T>;

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

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
-import { MarkTouched } from '../../Models/Payloads';
-export declare const markControlAsTouched: <T>(state: BaseFormState<T>, action: Action<MarkTouched>, mergeChanges?: boolean) => BaseFormState<T>;
+import { MarkTouchedPayload } from '../../Models/Payloads';
+export declare const markControlAsTouched: <T>(state: BaseFormState<T>, action: Action<MarkTouchedPayload>, mergeChanges?: boolean) => BaseFormState<T>;

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

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
-import { AddControl } from '../../Models/Payloads';
-export declare const pushControl: <T>(state: BaseFormState<T>, action: Action<AddControl>, mergeChanges?: boolean) => BaseFormState<T>;
+import { AddControlPayload } from '../../Models/Payloads';
+export declare const pushControl: <T>(state: BaseFormState<T>, action: Action<AddControlPayload>, mergeChanges?: boolean) => BaseFormState<T>;

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

@@ -1,5 +1,5 @@
 import { Action } from '@reactables/core';
 import { BaseForm } from '../../Models/Controls';
-import { ControlChange } from '../../Models/Payloads';
+import { UpdateValuesPayload } from '../../Models/Payloads';
 export declare const UPDATE_ANCESTOR_VALUES = "UPDATE_ANCESTOR_VALUES";
-export declare const updateAncestorValues: <T>(form: BaseForm<T>, { payload: { controlRef, value } }: Action<ControlChange<unknown>>) => BaseForm<T>;
+export declare const updateAncestorValues: <T>(form: BaseForm<T>, { payload: { controlRef, value } }: Action<UpdateValuesPayload<unknown>>) => BaseForm<T>;

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

@@ -1,5 +1,5 @@
 import { Action } from '@reactables/core';
 import { BaseForm } from '../../Models/Controls';
-import { ControlChange } from '../../Models/Payloads';
+import { UpdateValuesPayload } from '../../Models/Payloads';
 export declare const UPDATE_ANCESTOR_VALUES_ADD_CONTROL = "UPDATE_ANCESTOR_VALUES_ADD_CONTROL";
-export declare const updateAncestorValuesAddControl: <T>(form: BaseForm<T>, { payload: { controlRef, value } }: Action<ControlChange<unknown>>) => BaseForm<T>;
+export declare const updateAncestorValuesAddControl: <T>(form: BaseForm<T>, { payload: { controlRef, value } }: Action<UpdateValuesPayload<unknown>>) => BaseForm<T>;

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

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

package/dist/RxForm/RxForm.d.ts

@@ -1,5 +1,5 @@
-import { Reactable, EffectsAndSources, Action } from '@reactables/core';
-import { ControlChange, AddControl, MarkTouched, PushControl } from '../Models/Payloads';
+import { Reactable, EffectsAndSources, Action, Effect, ScopedEffects } from '@reactables/core';
+import { UpdateValuesPayload, AddControlPayload, MarkTouchedPayload, PushControlPayload } from '../Models/Payloads';
 import { ControlRef } from '../Models';
 import { FormControlConfig, FormArrayConfig, FormGroupConfig, AbstractControlConfig } from '../Models/Configs';
 import { ValidatorFn, ValidatorAsyncFn } from '../Models/Validators';
@@ -9,27 +9,31 @@ export declare const control: <T>(config: FormControlConfig<T> | FbControl<T>) =
 export declare const array: (config: FormArrayConfig) => FormArrayConfig;
 export declare const group: (config: FormGroupConfig) => FormGroupConfig;
 export type RxFormActions = {
-    updateValues: <T>(payload: ControlChange<T>) => void;
-    addControl: (payload: AddControl) => void;
-    pushControl: (payload: PushControl) => void;
+    updateValues: <T>(payload: UpdateValuesPayload<T>) => void;
+    addControl: (payload: AddControlPayload) => void;
+    pushControl: (payload: PushControlPayload) => void;
     removeControl: (payload: ControlRef) => void;
     markControlAsPristine: (payload: ControlRef) => void;
-    markControlAsTouched: (payload: MarkTouched) => void;
+    markControlAsTouched: (payload: MarkTouchedPayload) => void;
     markControlAsUntouched: (payload: ControlRef) => void;
     resetControl: (payload: ControlRef) => void;
 };
 export interface FormReducers {
-    updateValues: <T>(state: BaseFormState<T>, action: Action<ControlChange<unknown>>) => BaseFormState<T>;
-    removeControl: <T>(state: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
-    pushControl: <T>(state: BaseFormState<T>, action: Action<PushControl>) => BaseFormState<T>;
-    addControl: <T>(state: BaseFormState<T>, action: Action<AddControl>) => BaseFormState<T>;
-    markControlAsPristine: <T>(state: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
-    markControlAsTouched: <T>(state: BaseFormState<T>, action: Action<MarkTouched>) => BaseFormState<T>;
-    markControlAsUntouched: <T>(state: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
-    resetControl: <T>(state: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
+    updateValues: <T>(state: BaseFormState<T>, payload: UpdateValuesPayload<unknown>) => BaseFormState<T>;
+    removeControl: <T>(state: BaseFormState<T>, payload: ControlRef) => BaseFormState<T>;
+    pushControl: <T>(state: BaseFormState<T>, payload: PushControlPayload) => BaseFormState<T>;
+    addControl: <T>(state: BaseFormState<T>, payload: AddControlPayload) => BaseFormState<T>;
+    markControlAsPristine: <T>(state: BaseFormState<T>, payload: ControlRef) => BaseFormState<T>;
+    markControlAsTouched: <T>(state: BaseFormState<T>, payload: MarkTouchedPayload) => BaseFormState<T>;
+    markControlAsUntouched: <T>(state: BaseFormState<T>, payload: ControlRef) => BaseFormState<T>;
+    resetControl: <T>(state: BaseFormState<T>, payload: ControlRef) => BaseFormState<T>;
 }
+type CustomReducer = (reducers: FormReducers, state: BaseFormState<unknown>, action: Action<unknown>) => BaseFormState<unknown>;
 export interface CustomReducers {
-    [key: string]: (reducers: FormReducers, state: BaseFormState<unknown>, action: Action<unknown>) => BaseFormState<unknown>;
+    [key: string]: CustomReducer | {
+        reducer: CustomReducer;
+        effects?: ((payload?: unknown) => ScopedEffects<unknown>) | Effect<unknown, unknown>[];
+    };
 }
 export interface RxFormOptions<T extends CustomReducers> extends EffectsAndSources {
     reducers?: T;

package/dist/RxForm/Tests/customReducers.test.d.ts

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

package/dist/RxForm/Tests/initialization.test.d.ts

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

package/dist/RxForm/Tests/markControlAsPristine.test.d.ts

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

package/dist/RxForm/Tests/markControlTouchStatus.test.d.ts

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

package/dist/RxForm/Tests/pushControl.test.d.ts

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

package/dist/RxForm/Tests/removeControl.test.d.ts

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

package/dist/RxForm/Tests/resetControl.test.d.ts

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

package/dist/RxForm/Tests/updateValues.test.d.ts

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

package/dist/index.js

@@ -221,8 +221,8 @@ 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 changedControls = formChangeAction.payload.changedControls;
         var controlsToCheck = changedControls ? Object.values(changedControls) : [];
@@ -351,7 +351,7 @@ var updateDescendants = function (state, _a) {
     };
 };
 // Will only update child controls that are present.
-// Use AddControl/RemoveControl action reducers to add/remove control
+// 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;
@@ -359,20 +359,25 @@ var updateValues = function (_a, action, mergeChanges) {
     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 newControl = __assign(__assign({}, form[ctrlKey]), { validatorErrors: validatorErrors, dirty: !isEqual__default["default"](value, form[ctrlKey].pristineValue), value: value });
+    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 = form[ctrlKey].config.controls;
+    var configControls = config.controls;
     // Update its children
     if (configControls) {
         result = updateDescendants(result, {
             type: UPDATE_DESCENDANT_VALUES,
             payload: {
                 controlRef: controlRef,
-                value: value
+                value: newValue
             }
         });
     }
@@ -380,7 +385,7 @@ var updateValues = function (_a, action, mergeChanges) {
     if (controlRef.length) {
         result = __assign(__assign({}, result), { form: updateAncestorValues(result.form, {
                 type: UPDATE_ANCESTOR_VALUES,
-                payload: { controlRef: controlRef, value: value }
+                payload: { controlRef: controlRef, value: newValue }
             }) });
     }
     var changedAncestorControls = getAncestorControls(controlRef, result.form).reduce(function (acc, control) {
@@ -989,29 +994,29 @@ var control = function (config) {
 var array = function (config) { return config; };
 var group = function (config) { return config; };
 var reducerTools = {
-    updateValues: function (state, action) {
-        return updateValues(state, action, true);
+    updateValues: function (state, payload) {
+        return updateValues(state, { payload: payload }, true);
     },
-    removeControl: function (state, action) {
-        return removeControl(state, action, true);
+    removeControl: function (state, payload) {
+        return removeControl(state, { payload: payload }, true);
     },
-    pushControl: function (state, action) {
-        return pushControl(state, action, true);
+    pushControl: function (state, payload) {
+        return pushControl(state, { payload: payload }, true);
     },
-    addControl: function (state, action) {
-        return addControl(state, action, true);
+    addControl: function (state, payload) {
+        return addControl(state, { payload: payload }, true);
     },
-    markControlAsPristine: function (state, action) {
-        return markControlAsPristine(state, action, true);
+    markControlAsPristine: function (state, payload) {
+        return markControlAsPristine(state, { payload: payload }, true);
     },
-    markControlAsTouched: function (state, action) {
-        return markControlAsTouched(state, action, true);
+    markControlAsTouched: function (state, payload) {
+        return markControlAsTouched(state, { payload: payload }, true);
     },
-    markControlAsUntouched: function (state, action) {
-        return markControlAsUntouched(state, action, true);
+    markControlAsUntouched: function (state, payload) {
+        return markControlAsUntouched(state, { payload: payload }, true);
     },
-    resetControl: function (state, action) {
-        return resetControl(state, action, true);
+    resetControl: function (state, payload) {
+        return resetControl(state, { payload: payload }, true);
     }
 };
 var build = function (config, options) {
@@ -1020,15 +1025,20 @@ var build = function (config, options) {
     var reducers = options.reducers, otherOptions = __rest(options, ["reducers"]);
     var customReducers = Object.entries(reducers || {}).reduce(function (acc, _a) {
         var _b;
-        var key = _a[0], reducer = _a[1];
-        return (__assign(__assign({}, acc), (_b = {}, _b[key] = function (_a, action) {
-            var form = _a.form;
-            return reducer(reducerTools, { form: form }, action);
-        }, _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 rxHub1 = 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));
-    var rxHub2 = core.RxBuilder({
-        sources: [buildHub2Source(rxHub1)],
+    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,
@@ -1041,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) {

package/package.json

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