@websolutespa/bom-mixer-forms 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,46 +1,63 @@
-# @websolutespa/bom-mixer-forms
-
-## 0.3.1
-
-### Patch Changes
-
-- Updating: dependencies
-- Updated dependencies
-  - @websolutespa/bom-mixer-hooks@1.7.2
-  - @websolutespa/bom-core@1.7.3
-
-## 0.3.0
-
-### Minor Changes
-
-- Updating: next 13.
-
-## 0.2.2
-
-### Patch Changes
-
-- Removed: unnecessary method deepCopy.
-
-## 0.2.1
-
-### Patch Changes
-
-- Added: source files.
-
-## 0.2.0
-
-### Minor Changes
-
-- Added: splat routes.
-
-## 0.1.0
-
-### Minor Changes
-
-- Added: @websolutespa/bom-core.
-
-## 0.0.2
-
-### Patch Changes
-
-- Added: first release.
+# @websolutespa/bom-mixer-forms
+
+## 0.3.3
+
+### Patch Changes
+
+- Modified: validators, useFormBuilder
+- Updated dependencies
+  - @websolutespa/bom-core@1.7.9
+
+## 0.3.2
+
+### Patch Changes
+
+- Fixing: downgrading eslint to v8.56.0
+- Updated dependencies
+  - @websolutespa/bom-mixer-hooks@1.7.4
+  - @websolutespa/bom-core@1.7.8
+
+## 0.3.1
+
+### Patch Changes
+
+- Updating: dependencies
+- Updated dependencies
+  - @websolutespa/bom-mixer-hooks@1.7.2
+  - @websolutespa/bom-core@1.7.3
+
+## 0.3.0
+
+### Minor Changes
+
+- Updating: next 13.
+
+## 0.2.2
+
+### Patch Changes
+
+- Removed: unnecessary method deepCopy.
+
+## 0.2.1
+
+### Patch Changes
+
+- Added: source files.
+
+## 0.2.0
+
+### Minor Changes
+
+- Added: splat routes.
+
+## 0.1.0
+
+### Minor Changes
+
+- Added: @websolutespa/bom-core.
+
+## 0.0.2
+
+### Patch Changes
+
+- Added: first release.

package/dist/index.d.ts

@@ -16,7 +16,7 @@ declare class FormAbstractCollection<T extends FormControls> extends FormAbstrac
     constructor(controls: T, validators?: (FormValidator | FormValidator[]));
     initControl_(controlOrValue: FormAbstract | any, key: any): FormAbstract;
     protected setInitialOptions(options?: FormOptions): void;
-    protected checkAsyncPropState_(key: string, option?: FormActivator, root?: FormCollection): Promise<boolean>;
+    protected checkAsyncPropState_(key: keyof FormFlags, option?: FormActivator, root?: FormCollection): Promise<boolean>;
     updateState_(): void;
     revalidate_(): Promise<void>;
     protected validate_(root?: FormCollection): Promise<void>;
@@ -43,10 +43,10 @@ declare class FormAbstractCollection<T extends FormControls> extends FormAbstrac
     set submitted(submitted: boolean);
     set touched(touched: boolean);
     get value(): {
-        [key: string]: any;
+        [key: string]: FormValue;
     };
     set value(value: {
-        [key: string]: any;
+        [key: string]: FormValue;
     });
     get errors(): {
         [key: string]: any;
@@ -60,7 +60,7 @@ declare class FormArray extends FormAbstractCollection<FormAbstract[]> {
     constructor(controls?: FormAbstract[], validators?: FormValidator | FormValidator[], initialOptions?: FormOptions);
     forEach_(callback: (control: FormAbstract, key: number) => any): void;
     map_(): FormAbstract[];
-    get value(): any[];
+    get value(): FormValue[];
     get length(): number;
     protected init(control: FormAbstract, key: number): void;
     set(control: FormAbstract, key: number): void;
@@ -74,9 +74,9 @@ declare class FormArray extends FormAbstractCollection<FormAbstract[]> {
 declare function formArray(controls?: FormAbstract[], validators?: FormValidator | FormValidator[]): FormArray;
 
 declare class FormControl extends FormAbstract {
-    constructor(value?: any, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions);
+    constructor(value?: FormValue, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions);
 }
-declare function formControl(value?: any, validators?: FormValidator | FormValidator[]): FormControl;
+declare function formControl(value?: FormValue, validators?: FormValidator | FormValidator[]): FormControl;
 
 declare class FormGroup extends FormAbstractCollection<{
     [key: string]: FormAbstract;
@@ -86,9 +86,14 @@ declare class FormGroup extends FormAbstractCollection<{
     }, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions);
 }
 declare function formGroup(controls?: {
-    [key: string]: FormAbstract | any;
+    [key: string]: FormAbstract | FormValue;
 }, validators?: FormValidator | FormValidator[]): FormGroup;
 
+type FormValue = any;
+type FormValueGroup = {
+    [key: string]: FormValue;
+};
+type FormValueArray = FormValue[];
 type IControlParam = {
     uid: number;
     control: FormControl;
@@ -101,7 +106,7 @@ type FormOptions = {
     schema?: ControlType;
     name?: string;
     label?: string;
-    value?: string;
+    value?: FormValue;
     placeholder?: string;
     required?: FormActivator;
     hidden?: FormActivator;
@@ -116,21 +121,34 @@ type ValidationError = {
     [key: string]: any;
 };
 type FormControls = {
-    [key: string]: FormAbstract;
+    [key: string]: FormAbstract | FormValue;
 } | FormAbstract[];
 type FormCollection = FormAbstractCollection<FormControls>;
-type FormActivator = boolean | ((value: any, rootValue: any, control?: FormAbstract, root?: FormCollection) => boolean | Promise<boolean>);
-type FormValidator = (value: any, rootValue: any, control?: FormAbstract, root?: FormCollection) => null | ValidationError;
-type FormAsyncValidator = (value: any, rootValue: any, control?: FormAbstract, root?: FormCollection) => Promise<null | ValidationError>;
+type FormActivator = boolean | ((value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => boolean | Promise<boolean>);
+type FormValidator = (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => null | ValidationError;
+type FormAsyncValidator = (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => Promise<null | ValidationError>;
 type FormFlags = {
-    [key: string]: boolean;
+    invalid: boolean;
+    disabled: boolean;
+    hidden: boolean;
+    readonly: boolean;
+    dirty: boolean;
+    touched: boolean;
+    submitted: boolean;
+    valid: boolean;
+    enabled: boolean;
+    visible: boolean;
+    writeable: boolean;
+    pristine: boolean;
+    untouched: boolean;
+    unsubmitted: boolean;
 };
 type FormErrors = {
     [key: string]: any;
 };
 type FormValidationError = {
     key: string;
-    value: any;
+    value: FormValue;
 };
 type FormValidationErrors = FormValidationError[];
 type FormState<T> = {
@@ -143,7 +161,7 @@ type IFormBuilderControlSchema = {
     schema: ControlType;
     name?: string;
     label?: string;
-    value?: string;
+    value?: FormValue;
     placeholder?: string;
     required?: FormActivator;
     hidden?: FormActivator;
@@ -164,15 +182,12 @@ type IFormBuilderGroupValues = {
     [key: string]: FormGroup | FormArray | FormControl;
 };
 type IFormBuilderSchema = IFormBuilderGroupSchema | IFormBuilderArraySchema;
-type StateValue = StateValue[] | {
-    [key: string]: StateValue;
-} | number | string | boolean | null | undefined;
 
 declare class FormAbstract extends EventEmitter {
     errors_: ValidationError;
-    value_: any;
+    value_: FormValue;
     validators_: FormValidator[];
-    state_: any;
+    state_: FormFlags;
     name?: string | number;
     parent?: FormCollection;
     schema: ControlType;
@@ -182,10 +197,10 @@ declare class FormAbstract extends EventEmitter {
     };
     protected initialOptions_?: FormOptions;
     private markAsDirty_;
-    constructor(value: any, validators?: (FormValidator | FormValidator[]));
+    constructor(value: FormValue, validators?: (FormValidator | FormValidator[]));
     protected setInitialOptions(options?: FormOptions): void;
     protected checkAsyncState_(root?: FormCollection): Promise<boolean>;
-    protected checkAsyncPropState_(key: string, option?: FormActivator, root?: FormCollection): Promise<boolean>;
+    protected checkAsyncPropState_(key: keyof FormFlags, option?: FormActivator, root?: FormCollection): Promise<boolean>;
     protected revalidate_(): Promise<void>;
     protected validate_(root?: FormCollection): Promise<void>;
     validateAndChange_(root?: FormCollection): Promise<void>;
@@ -193,7 +208,7 @@ declare class FormAbstract extends EventEmitter {
     protected change_(propagate?: boolean): void;
     protected updateState_(): void;
     reset(): void;
-    patch(value: any): void;
+    patch(value: FormValue): void;
     addValidators(...validators: FormValidator[]): void;
     replaceValidators(...validators: FormValidator[]): void;
     clearValidators(): void;
@@ -207,34 +222,33 @@ declare class FormAbstract extends EventEmitter {
     set placeholder(placeholder: string);
     get validators(): FormValidator[];
     set validators(validators: FormValidator[]);
-    get state(): any;
+    get state(): FormFlags;
     get errors(): ValidationError;
-    get invalid(): any;
-    get disabled(): any;
-    set disabled(disabled: any);
-    get hidden(): any;
-    set hidden(hidden: any);
-    get readonly(): any;
-    set readonly(readonly: any);
-    get dirty(): any;
-    set dirty(dirty: any);
-    get touched(): any;
-    set touched(touched: any);
-    get submitted(): any;
-    set submitted(submitted: any);
-    get valid(): any;
-    get enabled(): any;
-    get visible(): any;
-    get writeable(): any;
-    get pristine(): any;
-    get untouched(): any;
-    get unsubmitted(): any;
+    get invalid(): boolean;
+    get disabled(): boolean;
+    set disabled(disabled: boolean);
+    get hidden(): boolean;
+    set hidden(hidden: boolean);
+    get readonly(): boolean;
+    set readonly(readonly: boolean);
+    get dirty(): boolean;
+    set dirty(dirty: boolean);
+    get touched(): boolean;
+    set touched(touched: boolean);
+    get submitted(): boolean;
+    set submitted(submitted: boolean);
+    get valid(): boolean;
+    get enabled(): boolean;
+    get visible(): boolean;
+    get writeable(): boolean;
+    get pristine(): boolean;
+    get untouched(): boolean;
+    get unsubmitted(): boolean;
     get value(): any;
     set value(value: any);
 }
 
-declare function validValue(value: any): any;
-declare function isThenable(result: any): any;
+declare function validValue(value: FormValue): any;
 declare function mapErrors_(errors: FormErrors): FormValidationError[];
 declare function valueToString(value: IOption | IOption[] | IEquatable | IEquatable[] | null): string | string[] | undefined;
 declare function stringToValue(value: string | string[] | undefined, options?: IOption[], optionsExtra?: {
@@ -249,7 +263,7 @@ declare function EmailValidator(): FormValidator;
 /**
  * an equality match validation on another field
  */
-declare function MatchValidator(getOtherValue: (value: any, rootValue: any, control?: FormAbstract, root?: FormAbstract) => any): FormValidator;
+declare function MatchValidator(getOtherValue: (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormAbstract) => any): FormValidator;
 
 /**
  * a max string length validator
@@ -284,7 +298,7 @@ declare function PatternValidator(pattern: string | RegExp): FormValidator;
 /**
  * a required dependant on another field
  */
-declare function RequiredIfValidator(condition: (value: any, rootValue: any, control?: FormAbstract, root?: FormAbstract) => boolean): FormValidator;
+declare function RequiredIfValidator(condition: (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormAbstract) => boolean): FormValidator;
 
 /**
  * a required and true validator
@@ -302,4 +316,4 @@ declare function useForm<T, U extends (FormGroup | FormArray)>(factory: () => U,
 
 declare function useFormBuilder<T, U extends (FormGroup | FormArray)>(schema: IFormBuilderSchema, deps?: DependencyList): [FormState<T>, (value: Partial<T>) => void, () => void, () => void, U];
 
-export { ControlType, EmailValidator, FormAbstract, FormAbstractCollection, FormActivator, FormArray, FormAsyncValidator, FormCollection, FormControl, FormControls, FormErrors, FormFlags, FormGroup, FormOptions, FormState, FormValidationError, FormValidationErrors, FormValidator, IControlParam, IFormBuilderArraySchema, IFormBuilderControlSchema, IFormBuilderGroupSchema, IFormBuilderGroupValues, IFormBuilderSchema, IFormOption, MatchValidator, MaxLengthValidator, MaxValidator, MinLengthValidator, MinValidator, NullValidator, PatternValidator, RequiredIfValidator, RequiredTrueValidator, RequiredValidator, StateValue, ValidationError, formArray, formControl, formGroup, isThenable, mapErrors_, stringToValue, useControl, useForm, useFormBuilder, validValue, valueToString };
+export { ControlType, EmailValidator, FormAbstract, FormAbstractCollection, FormActivator, FormArray, FormAsyncValidator, FormCollection, FormControl, FormControls, FormErrors, FormFlags, FormGroup, FormOptions, FormState, FormValidationError, FormValidationErrors, FormValidator, FormValue, FormValueArray, FormValueGroup, IControlParam, IFormBuilderArraySchema, IFormBuilderControlSchema, IFormBuilderGroupSchema, IFormBuilderGroupValues, IFormBuilderSchema, IFormOption, MatchValidator, MaxLengthValidator, MaxValidator, MinLengthValidator, MinValidator, NullValidator, PatternValidator, RequiredIfValidator, RequiredTrueValidator, RequiredValidator, ValidationError, formArray, formControl, formGroup, mapErrors_, stringToValue, useControl, useForm, useFormBuilder, validValue, valueToString };

package/dist/index.js

@@ -73,7 +73,6 @@ __export(src_exports, {
   formArray: () => formArray,
   formControl: () => formControl,
   formGroup: () => formGroup,
-  isThenable: () => isThenable,
   mapErrors_: () => mapErrors_,
   stringToValue: () => stringToValue,
   useControl: () => useControl,
@@ -84,6 +83,9 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/forms/form-abstract.ts
+var import_bom_core = require("@websolutespa/bom-core");
+
 // src/forms/event-emitter.ts
 var EventEmitter = class {
   constructor() {
@@ -123,9 +125,6 @@ var EventEmitter = class {
 function validValue(value) {
   return value !== void 0 && value !== "" ? value : null;
 }
-function isThenable(result) {
-  return result && typeof result.then === "function";
-}
 function mapErrors_(errors) {
   return Object.keys(errors).map((key) => ({ key, value: errors[key] }));
 }
@@ -233,7 +232,7 @@ var FormAbstract = class extends EventEmitter {
       let dirty = false;
       if (typeof option === "function") {
         let result = option(this.value_, root == null ? void 0 : root.value, this, root);
-        result = isThenable(result) ? yield result : result;
+        result = (0, import_bom_core.isPromise)(result) ? yield result : result;
         if (this.state_[key] !== result) {
           this.state_[key] = result;
           dirty = true;
@@ -259,7 +258,7 @@ var FormAbstract = class extends EventEmitter {
       } else {
         const validations = this.validators_.map((x) => x(this.value_, root == null ? void 0 : root.value, this, root)).filter((x) => x);
         const { results, promises } = validations.reduce((p, c) => {
-          isThenable(c) ? p.promises.push(c) : p.results.push(c);
+          (0, import_bom_core.isPromise)(c) ? p.promises.push(c) : p.results.push(c);
           return p;
         }, { results: [], promises: [] });
         promises.forEach((x) => x.then((result) => {
@@ -522,6 +521,9 @@ var FormAbstract = class extends EventEmitter {
   */
 };
 
+// src/forms/form-abstract-collection.ts
+var import_bom_core2 = require("@websolutespa/bom-core");
+
 // src/forms/form-control.ts
 var FormControl = class extends FormAbstract {
   constructor(value = null, validators, initialOptions) {
@@ -593,7 +595,7 @@ var FormAbstractCollection = class extends FormAbstract {
       let dirty = false;
       if (typeof option === "function") {
         let result = option(this.value_, root == null ? void 0 : root.value, this, root);
-        result = isThenable(result) ? yield result : result;
+        result = (0, import_bom_core2.isPromise)(result) ? yield result : result;
         this.forEach_((control) => {
           if (control.state_[key] !== result) {
             control.state_[key] = result;
@@ -859,10 +861,11 @@ function formGroup(controls = {}, validators) {
 function EmailValidator() {
   const regex = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
   return function(value) {
-    if (!value) {
+    if (typeof value === "string") {
+      return regex.test(value) ? null : { email: true };
+    } else {
       return null;
     }
-    return regex.test(value) ? null : { email: true };
   };
 }
 
@@ -878,21 +881,25 @@ function MatchValidator(getOtherValue) {
 // src/forms/validators/max-length.validator.ts
 function MaxLengthValidator(maxlength) {
   return function(value) {
-    if (value == null || maxlength == null) {
+    if (maxlength == null) {
+      return null;
+    }
+    if (typeof value === "string") {
+      const length = value ? value.length : 0;
+      return length > maxlength ? { minlength: { requiredLength: maxlength, actualLength: length } } : null;
+    } else {
       return null;
     }
-    const length = value ? value.length : 0;
-    return length > maxlength ? { minlength: { requiredLength: maxlength, actualLength: length } } : null;
   };
 }
 
 // src/forms/validators/max.validator.ts
 function MaxValidator(max) {
   return function(value) {
+    value = typeof value === "string" ? parseFloat(value) : typeof value === "number" ? value : null;
     if (value == null || max == null) {
       return null;
     }
-    value = parseFloat(value);
     return !isNaN(value) && value > max ? { max: { max, actual: value } } : null;
   };
 }
@@ -900,21 +907,25 @@ function MaxValidator(max) {
 // src/forms/validators/min-length.validator.ts
 function MinLengthValidator(minlength) {
   return function(value) {
-    if (value == null || minlength == null) {
+    if (minlength == null) {
+      return null;
+    }
+    if (typeof value === "string") {
+      const length = value ? value.length : 0;
+      return length < minlength ? { minlength: { requiredLength: minlength, actualLength: length } } : null;
+    } else {
       return null;
     }
-    const length = value ? value.length : 0;
-    return length < minlength ? { minlength: { requiredLength: minlength, actualLength: length } } : null;
   };
 }
 
 // src/forms/validators/min.validator.ts
 function MinValidator(min) {
   return function(value) {
+    value = typeof value === "string" ? parseFloat(value) : typeof value === "number" ? value : null;
     if (value == null || min == null) {
       return null;
     }
-    value = parseFloat(value);
     return !isNaN(value) && value < min ? { min: { min, actual: value } } : null;
   };
 }
@@ -929,11 +940,15 @@ function NullValidator() {
 // src/forms/validators/pattern.validator.ts
 function PatternValidator(pattern) {
   return function(value) {
-    if (value == null || pattern == null) {
+    if (pattern == null) {
+      return null;
+    }
+    if (typeof value === "string") {
+      const regex = patternToRegEx(pattern);
+      return regex.test(value) ? null : { pattern: { requiredPattern: regex.toString(), actualValue: value } };
+    } else {
       return null;
     }
-    const regex = patternToRegEx(pattern);
-    return regex.test(value) ? null : { pattern: { requiredPattern: regex.toString(), actualValue: value } };
   };
 }
 function patternToRegEx(pattern) {
@@ -949,10 +964,16 @@ function patternToRegEx(pattern) {
 }
 
 // src/forms/validators/required-if.validator.ts
+var import_bom_core3 = require("@websolutespa/bom-core");
 function RequiredIfValidator(condition) {
   return function(value, rootValue, control, root) {
+    console.log("RequiredIfValidator", value, Boolean(condition(value, rootValue, control, root)));
     if (Boolean(condition(value, rootValue, control, root)) === true) {
-      return value == null || value.length === 0 ? { required: true } : null;
+      if ((0, import_bom_core3.isArray)(value) || typeof value === "string") {
+        return value.length === 0 ? { required: true } : null;
+      } else {
+        return value == null ? { required: true } : null;
+      }
     } else {
       return null;
     }
@@ -967,9 +988,14 @@ function RequiredTrueValidator() {
 }
 
 // src/forms/validators/required.validator.ts
+var import_bom_core4 = require("@websolutespa/bom-core");
 function RequiredValidator() {
   return function(value) {
-    return value == null || value.length === 0 ? { required: true } : null;
+    if ((0, import_bom_core4.isArray)(value) || typeof value === "string") {
+      return value.length === 0 ? { required: true } : null;
+    } else {
+      return value == null ? { required: true } : null;
+    }
   };
 }
 
@@ -1053,7 +1079,7 @@ function useFormBuilder(schema, deps = []) {
       setState(newState);
     };
     collection.on("change", onChange);
-    collection.validateAndChange_();
+    collection.revalidate_();
     return () => collection.off("change", onChange);
   }, deps);
   return [state, setValue, setTouched, reset, collection];
@@ -1105,7 +1131,6 @@ function mapSchema_(schema) {
   formArray,
   formControl,
   formGroup,
-  isThenable,
   mapErrors_,
   stringToValue,
   useControl,

package/dist/index.mjs

@@ -35,6 +35,9 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
+// src/forms/form-abstract.ts
+import { isPromise } from "@websolutespa/bom-core";
+
 // src/forms/event-emitter.ts
 var EventEmitter = class {
   constructor() {
@@ -74,9 +77,6 @@ var EventEmitter = class {
 function validValue(value) {
   return value !== void 0 && value !== "" ? value : null;
 }
-function isThenable(result) {
-  return result && typeof result.then === "function";
-}
 function mapErrors_(errors) {
   return Object.keys(errors).map((key) => ({ key, value: errors[key] }));
 }
@@ -184,7 +184,7 @@ var FormAbstract = class extends EventEmitter {
       let dirty = false;
       if (typeof option === "function") {
         let result = option(this.value_, root == null ? void 0 : root.value, this, root);
-        result = isThenable(result) ? yield result : result;
+        result = isPromise(result) ? yield result : result;
         if (this.state_[key] !== result) {
           this.state_[key] = result;
           dirty = true;
@@ -210,7 +210,7 @@ var FormAbstract = class extends EventEmitter {
       } else {
         const validations = this.validators_.map((x) => x(this.value_, root == null ? void 0 : root.value, this, root)).filter((x) => x);
         const { results, promises } = validations.reduce((p, c) => {
-          isThenable(c) ? p.promises.push(c) : p.results.push(c);
+          isPromise(c) ? p.promises.push(c) : p.results.push(c);
           return p;
         }, { results: [], promises: [] });
         promises.forEach((x) => x.then((result) => {
@@ -473,6 +473,9 @@ var FormAbstract = class extends EventEmitter {
   */
 };
 
+// src/forms/form-abstract-collection.ts
+import { isPromise as isPromise2 } from "@websolutespa/bom-core";
+
 // src/forms/form-control.ts
 var FormControl = class extends FormAbstract {
   constructor(value = null, validators, initialOptions) {
@@ -544,7 +547,7 @@ var FormAbstractCollection = class extends FormAbstract {
       let dirty = false;
       if (typeof option === "function") {
         let result = option(this.value_, root == null ? void 0 : root.value, this, root);
-        result = isThenable(result) ? yield result : result;
+        result = isPromise2(result) ? yield result : result;
         this.forEach_((control) => {
           if (control.state_[key] !== result) {
             control.state_[key] = result;
@@ -810,10 +813,11 @@ function formGroup(controls = {}, validators) {
 function EmailValidator() {
   const regex = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
   return function(value) {
-    if (!value) {
+    if (typeof value === "string") {
+      return regex.test(value) ? null : { email: true };
+    } else {
       return null;
     }
-    return regex.test(value) ? null : { email: true };
   };
 }
 
@@ -829,21 +833,25 @@ function MatchValidator(getOtherValue) {
 // src/forms/validators/max-length.validator.ts
 function MaxLengthValidator(maxlength) {
   return function(value) {
-    if (value == null || maxlength == null) {
+    if (maxlength == null) {
+      return null;
+    }
+    if (typeof value === "string") {
+      const length = value ? value.length : 0;
+      return length > maxlength ? { minlength: { requiredLength: maxlength, actualLength: length } } : null;
+    } else {
       return null;
     }
-    const length = value ? value.length : 0;
-    return length > maxlength ? { minlength: { requiredLength: maxlength, actualLength: length } } : null;
   };
 }
 
 // src/forms/validators/max.validator.ts
 function MaxValidator(max) {
   return function(value) {
+    value = typeof value === "string" ? parseFloat(value) : typeof value === "number" ? value : null;
     if (value == null || max == null) {
       return null;
     }
-    value = parseFloat(value);
     return !isNaN(value) && value > max ? { max: { max, actual: value } } : null;
   };
 }
@@ -851,21 +859,25 @@ function MaxValidator(max) {
 // src/forms/validators/min-length.validator.ts
 function MinLengthValidator(minlength) {
   return function(value) {
-    if (value == null || minlength == null) {
+    if (minlength == null) {
+      return null;
+    }
+    if (typeof value === "string") {
+      const length = value ? value.length : 0;
+      return length < minlength ? { minlength: { requiredLength: minlength, actualLength: length } } : null;
+    } else {
       return null;
     }
-    const length = value ? value.length : 0;
-    return length < minlength ? { minlength: { requiredLength: minlength, actualLength: length } } : null;
   };
 }
 
 // src/forms/validators/min.validator.ts
 function MinValidator(min) {
   return function(value) {
+    value = typeof value === "string" ? parseFloat(value) : typeof value === "number" ? value : null;
     if (value == null || min == null) {
       return null;
     }
-    value = parseFloat(value);
     return !isNaN(value) && value < min ? { min: { min, actual: value } } : null;
   };
 }
@@ -880,11 +892,15 @@ function NullValidator() {
 // src/forms/validators/pattern.validator.ts
 function PatternValidator(pattern) {
   return function(value) {
-    if (value == null || pattern == null) {
+    if (pattern == null) {
+      return null;
+    }
+    if (typeof value === "string") {
+      const regex = patternToRegEx(pattern);
+      return regex.test(value) ? null : { pattern: { requiredPattern: regex.toString(), actualValue: value } };
+    } else {
       return null;
     }
-    const regex = patternToRegEx(pattern);
-    return regex.test(value) ? null : { pattern: { requiredPattern: regex.toString(), actualValue: value } };
   };
 }
 function patternToRegEx(pattern) {
@@ -900,10 +916,16 @@ function patternToRegEx(pattern) {
 }
 
 // src/forms/validators/required-if.validator.ts
+import { isArray } from "@websolutespa/bom-core";
 function RequiredIfValidator(condition) {
   return function(value, rootValue, control, root) {
+    console.log("RequiredIfValidator", value, Boolean(condition(value, rootValue, control, root)));
     if (Boolean(condition(value, rootValue, control, root)) === true) {
-      return value == null || value.length === 0 ? { required: true } : null;
+      if (isArray(value) || typeof value === "string") {
+        return value.length === 0 ? { required: true } : null;
+      } else {
+        return value == null ? { required: true } : null;
+      }
     } else {
       return null;
     }
@@ -918,9 +940,14 @@ function RequiredTrueValidator() {
 }
 
 // src/forms/validators/required.validator.ts
+import { isArray as isArray2 } from "@websolutespa/bom-core";
 function RequiredValidator() {
   return function(value) {
-    return value == null || value.length === 0 ? { required: true } : null;
+    if (isArray2(value) || typeof value === "string") {
+      return value.length === 0 ? { required: true } : null;
+    } else {
+      return value == null ? { required: true } : null;
+    }
   };
 }
 
@@ -1004,7 +1031,7 @@ function useFormBuilder(schema, deps = []) {
       setState(newState);
     };
     collection.on("change", onChange);
-    collection.validateAndChange_();
+    collection.revalidate_();
     return () => collection.off("change", onChange);
   }, deps);
   return [state, setValue, setTouched, reset, collection];
@@ -1055,7 +1082,6 @@ export {
   formArray,
   formControl,
   formGroup,
-  isThenable,
   mapErrors_,
   stringToValue,
   useControl,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-forms",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Mixer Forms module of the BOM Repository",
   "keywords": [
     "bom",
@@ -34,7 +34,7 @@
     "@websolutespa/bom-cli": "*",
     "@websolutespa/test": "*",
     "@websolutespa/tsconfig": "*",
-    "eslint": "^9.0.0",
+    "eslint": "^8.56.0",
     "eslint-config-websolute": "*",
     "raw-loader": "^4.0.2",
     "ts-node": "^10.9.2",

package/src/forms/form-abstract-collection.ts

@@ -1,7 +1,7 @@
+import { isPromise } from '@websolutespa/bom-core';
 import { FormAbstract } from './form-abstract';
 import { FormControl } from './form-control';
-import { FormActivator, FormCollection, FormControls, FormOptions, FormValidator } from './types';
-import { isThenable } from './utils';
+import { FormActivator, FormCollection, FormControls, FormFlags, FormOptions, FormValidator, FormValue } from './types';
 
 export class FormAbstractCollection<T extends FormControls> extends FormAbstract {
 
@@ -72,12 +72,12 @@ export class FormAbstractCollection<T extends FormControls> extends FormAbstract
     this.updateState_();
   }
 
-  protected async checkAsyncPropState_(key: string, option?: FormActivator, root?: FormCollection): Promise<boolean> {
+  protected async checkAsyncPropState_(key: keyof FormFlags, option?: FormActivator, root?: FormCollection): Promise<boolean> {
     let dirty = false;
     if (typeof option === 'function') {
       let result = option(this.value_, root?.value, this, root);
       // console.log('checkAsyncPropState_', result);
-      result = isThenable(result) ? await result : result;
+      result = isPromise(result) ? await result : result;
       this.forEach_((control: FormAbstract) => {
         if (control.state_[key] !== result) {
           control.state_[key] = result;
@@ -280,8 +280,8 @@ export class FormAbstractCollection<T extends FormControls> extends FormAbstract
     });
   }
 
-  get value(): { [key: string]: any } {
-    return this.reduce_((result: { [key: string]: any }, control: FormAbstract, key: string) => {
+  get value(): { [key: string]: FormValue } {
+    return this.reduce_((result: { [key: string]: FormValue }, control: FormAbstract, key: string) => {
       if (control.enabled) {
         result[key] = control.value;
       }
@@ -289,7 +289,7 @@ export class FormAbstractCollection<T extends FormControls> extends FormAbstract
     }, {});
   }
 
-  set value(value: { [key: string]: any }) {
+  set value(value: { [key: string]: FormValue }) {
     this.forEach_((control: FormAbstract, key: string) => {
       control.value = value[key];
     });

package/src/forms/form-abstract.ts

@@ -1,15 +1,15 @@
-import { IOption } from '@websolutespa/bom-core';
+import { IOption, isPromise } from '@websolutespa/bom-core';
 import { EventEmitter } from './event-emitter';
-import { ControlType, FormActivator, FormCollection, FormOptions, FormValidator, ValidationError } from './types';
-import { isThenable, validValue } from './utils';
+import { ControlType, FormActivator, FormCollection, FormFlags, FormOptions, FormValidator, FormValue, ValidationError } from './types';
+import { validValue } from './utils';
 
 export class FormAbstract extends EventEmitter {
 
   // callbacks_: Function[] = [];
   errors_: ValidationError;
-  value_: any;
+  value_: FormValue;
   validators_: FormValidator[];
-  state_: any;
+  state_: FormFlags;
   name?: string | number;
   parent?: FormCollection;
 
@@ -20,7 +20,7 @@ export class FormAbstract extends EventEmitter {
   protected initialOptions_?: FormOptions;
   private markAsDirty_: boolean = false;
 
-  constructor(value: any, validators?: (FormValidator | FormValidator[])) {
+  constructor(value: FormValue, validators?: (FormValidator | FormValidator[])) {
     super();
     this.errors_ = {};
     this.value_ = validValue(value);
@@ -164,11 +164,11 @@ export class FormAbstract extends EventEmitter {
     return dirty;
   }
 
-  protected async checkAsyncPropState_(key: string, option?: FormActivator, root?: FormCollection): Promise<boolean> {
+  protected async checkAsyncPropState_(key: keyof FormFlags, option?: FormActivator, root?: FormCollection): Promise<boolean> {
     let dirty = false;
     if (typeof option === 'function') {
       let result = option(this.value_, root?.value, this, root);
-      result = isThenable(result) ? await result : result;
+      result = isPromise(result) ? await result : result;
       if (this.state_[key] !== result) {
         this.state_[key] = result;
         dirty = true;
@@ -193,7 +193,7 @@ export class FormAbstract extends EventEmitter {
     } else {
       const validations = this.validators_.map((x) => x(this.value_, root?.value, this, root)).filter((x) => x);
       const { results, promises } = validations.reduce((p: { results: (null | ValidationError)[], promises: Promise<null | ValidationError>[] }, c: (null | ValidationError) | Promise<null | ValidationError>) => {
-        isThenable(c) ? p.promises.push(c as Promise<null | ValidationError>) : p.results.push(c);
+        isPromise(c) ? p.promises.push(c as Promise<null | ValidationError>) : p.results.push(c);
         return p;
       }, { results: [], promises: [] });
       promises.forEach(x => x.then((result: null | ValidationError) => {
@@ -310,7 +310,7 @@ export class FormAbstract extends EventEmitter {
     this.revalidate_();
   }
 
-  patch(value: any) {
+  patch(value: FormValue) {
     this.value = value;
   }
 

package/src/forms/form-array.ts

@@ -1,6 +1,6 @@
 import { FormAbstract } from './form-abstract';
 import { FormAbstractCollection } from './form-abstract-collection';
-import { FormOptions, FormValidator } from './types';
+import { FormOptions, FormValidator, FormValue } from './types';
 
 export class FormArray extends FormAbstractCollection<FormAbstract[]> {
 
@@ -18,8 +18,8 @@ export class FormArray extends FormAbstractCollection<FormAbstract[]> {
     return this.controls;
   }
 
-  get value(): any[] {
-    return this.reduce_((result: any[], control: FormAbstract, key: number) => {
+  get value(): FormValue[] {
+    return this.reduce_((result: FormValue[], control: FormAbstract, key: number) => {
       result[key] = control.value;
       return result;
     }, []); // init as array

package/src/forms/form-control.ts

@@ -1,14 +1,14 @@
 import { FormAbstract } from './form-abstract';
-import { FormOptions, FormValidator } from './types';
+import { FormOptions, FormValidator, FormValue } from './types';
 
 export class FormControl extends FormAbstract {
-  constructor(value: any = null, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions) {
+  constructor(value: FormValue = null, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions) {
     super(value, validators);
     this.setInitialOptions(initialOptions);
     // this.revalidate_();
   }
 }
 
-export function formControl(value: any = null, validators?: FormValidator | FormValidator[]) {
+export function formControl(value: FormValue = null, validators?: FormValidator | FormValidator[]) {
   return new FormControl(value, validators);
 }

package/src/forms/form-group.ts

@@ -1,6 +1,6 @@
 import { FormAbstract } from './form-abstract';
 import { FormAbstractCollection } from './form-abstract-collection';
-import { FormOptions, FormValidator } from './types';
+import { FormOptions, FormValidator, FormValue } from './types';
 
 export class FormGroup extends FormAbstractCollection<{ [key: string]: FormAbstract }> {
   constructor(controls: { [key: string]: FormAbstract | any } = {}, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions) {
@@ -10,6 +10,6 @@ export class FormGroup extends FormAbstractCollection<{ [key: string]: FormAbstr
   }
 }
 
-export function formGroup(controls: { [key: string]: FormAbstract | any } = {}, validators?: FormValidator | FormValidator[]) {
+export function formGroup(controls: { [key: string]: FormAbstract | FormValue } = {}, validators?: FormValidator | FormValidator[]) {
   return new FormGroup(controls, validators);
 }

package/src/forms/types.ts

@@ -5,6 +5,12 @@ import { FormArray } from './form-array';
 import { FormControl } from './form-control';
 import { FormGroup } from './form-group';
 
+export type FormValue = any; // string | number | boolean | null | Date | FormValueGroup | FormValueArray;
+
+export type FormValueGroup = { [key: string]: FormValue };
+
+export type FormValueArray = FormValue[];
+
 export type IControlParam = { uid: number, control: FormControl };
 
 export type IFormOption = { id: IEquatable, name: string };
@@ -13,7 +19,7 @@ export type FormOptions = {
   schema?: ControlType;
   name?: string,
   label?: string,
-  value?: string;
+  value?: FormValue;
   placeholder?: string,
   required?: FormActivator,
   hidden?: FormActivator,
@@ -27,15 +33,31 @@ export type ValidationError = {
   [key: string]: any
 };
 
-export type FormControls = { [key: string]: FormAbstract } | FormAbstract[];
+export type FormControls = { [key: string]: FormAbstract | FormValue } | FormAbstract[];
 export type FormCollection = FormAbstractCollection<FormControls>;
-export type FormActivator = boolean | ((value: any, rootValue: any, control?: FormAbstract, root?: FormCollection) => boolean | Promise<boolean>);
-export type FormValidator = (value: any, rootValue: any, control?: FormAbstract, root?: FormCollection) => null | ValidationError;
-export type FormAsyncValidator = (value: any, rootValue: any, control?: FormAbstract, root?: FormCollection) => Promise<null | ValidationError>;
-
-export type FormFlags = { [key: string]: boolean };
+export type FormActivator = boolean | ((value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => boolean | Promise<boolean>);
+export type FormValidator = (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => null | ValidationError;
+export type FormAsyncValidator = (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => Promise<null | ValidationError>;
+export type FormFlags = {
+  invalid: boolean;
+  disabled: boolean;
+  hidden: boolean;
+  readonly: boolean;
+  dirty: boolean;
+  touched: boolean;
+  submitted: boolean;
+  // derived
+  valid: boolean;
+  enabled: boolean;
+  visible: boolean;
+  writeable: boolean;
+  pristine: boolean;
+  untouched: boolean;
+  unsubmitted: boolean;
+};
+// export type FormFlags = { [key: string]: boolean };
 export type FormErrors = { [key: string]: any };
-export type FormValidationError = { key: string, value: any };
+export type FormValidationError = { key: string, value: FormValue };
 export type FormValidationErrors = FormValidationError[];
 
 export type FormState<T> = {
@@ -50,7 +72,7 @@ export type IFormBuilderControlSchema = {
   schema: ControlType;
   name?: string;
   label?: string;
-  value?: string;
+  value?: FormValue;
   placeholder?: string;
   required?: FormActivator;
   hidden?: FormActivator,
@@ -66,5 +88,3 @@ export type IFormBuilderGroupSchema = { [key: string]: IFormBuilderControlSchema
 export type IFormBuilderArraySchema = IFormBuilderControlSchema[];
 export type IFormBuilderGroupValues = { [key: string]: FormGroup | FormArray | FormControl };
 export type IFormBuilderSchema = IFormBuilderGroupSchema | IFormBuilderArraySchema;
-
-export type StateValue = StateValue[] | { [key: string]: StateValue } | number | string | boolean | null | undefined;

package/src/forms/utils.ts

@@ -1,35 +1,14 @@
 import { IEquatable, IOption } from '@websolutespa/bom-core';
-import { FormErrors, FormValidationError } from './types';
+import { FormErrors, FormValidationError, FormValue } from './types';
 
-export function validValue(value: any) {
+export function validValue(value: FormValue) {
   return value !== undefined && value !== '' ? value : null;
 }
 
-export function isThenable(result: any) {
-  return result && typeof result.then === 'function';
-}
-
 export function mapErrors_(errors: FormErrors): FormValidationError[] {
   return Object.keys(errors).map(key => ({ key, value: errors[key] }));
 }
 
-/*
-export function deepCopy<T>(source: T): T;
-export function deepCopy(source: StateValue): StateValue {
-  if (Array.isArray(source)) {
-    return source.map(x => deepCopy(x));
-  } else if (source && typeof source === 'object') {
-    const copy: { [key: string]: any } = {};
-    Object.keys(source).forEach(key => {
-      copy[key] = deepCopy(source[key]);
-    });
-    return copy;
-  } else {
-    return source;
-  }
-}
-*/
-
 export function valueToString(value: IOption | IOption[] | IEquatable | IEquatable[] | null): string | string[] | undefined {
   function mapValue(value: IOption | IEquatable | null): string | undefined {
     const stringValue = value != null ? (

package/src/forms/validators/email.validator.ts

@@ -6,9 +6,10 @@ import { FormValidator } from '../types';
 export function EmailValidator(): FormValidator {
   const regex = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
   return function (value) {
-    if (!value) {
+    if (typeof value === 'string') {
+      return regex.test(value) ? null : { email: true };
+    } else {
       return null;
     }
-    return regex.test(value) ? null : { email: true };
   };
 }

package/src/forms/validators/match.validator.ts

@@ -1,11 +1,11 @@
 import { FormAbstract } from '../form-abstract';
-import { FormValidator } from '../types';
+import { FormValidator, FormValue } from '../types';
 import { validValue } from '../utils';
 
 /**
  * an equality match validation on another field
  */
-export function MatchValidator(getOtherValue: (value: any, rootValue: any, control?: FormAbstract, root?: FormAbstract) => any): FormValidator {
+export function MatchValidator(getOtherValue: (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormAbstract) => any): FormValidator {
   return function (value, rootValue, control, root) {
     let otherValue = getOtherValue(value, rootValue, control, root);
     otherValue = validValue(otherValue);

package/src/forms/validators/max-length.validator.ts

@@ -5,10 +5,14 @@ import { FormValidator } from '../types';
  */
 export function MaxLengthValidator(maxlength: number): FormValidator {
   return function (value) {
-    if (value == null || maxlength == null) { // loose
+    if (maxlength == null) {
+      return null;
+    }
+    if (typeof value === 'string') {
+      const length = value ? value.length : 0;
+      return length > maxlength ? { minlength: { requiredLength: maxlength, actualLength: length } } : null;
+    } else {
       return null;
     }
-    const length = value ? value.length : 0;
-    return length > maxlength ? { minlength: { requiredLength: maxlength, actualLength: length } } : null;
   };
 }

package/src/forms/validators/max.validator.ts

@@ -5,10 +5,10 @@ import { FormValidator } from '../types';
  */
 export function MaxValidator(max: number): FormValidator {
   return function (value) {
+    value = typeof value === 'string' ? parseFloat(value) : typeof value === 'number' ? value : null;
     if (value == null || max == null) { // loose
       return null;
     }
-    value = parseFloat(value);
     return !isNaN(value) && value > max ? { max: { max: max, actual: value } } : null;
   };
 }

package/src/forms/validators/min-length.validator.ts

@@ -5,10 +5,14 @@ import { FormValidator } from '../types';
  */
 export function MinLengthValidator(minlength: number): FormValidator {
   return function (value) {
-    if (value == null || minlength == null) { // loose
+    if (minlength == null) {
+      return null;
+    }
+    if (typeof value === 'string') {
+      const length = value ? value.length : 0;
+      return length < minlength ? { minlength: { requiredLength: minlength, actualLength: length } } : null;
+    } else {
       return null;
     }
-    const length = value ? value.length : 0;
-    return length < minlength ? { minlength: { requiredLength: minlength, actualLength: length } } : null;
   };
 }

package/src/forms/validators/min.validator.ts

@@ -5,10 +5,10 @@ import { FormValidator } from '../types';
  */
 export function MinValidator(min: number): FormValidator {
   return function (value) {
+    value = typeof value === 'string' ? parseFloat(value) : typeof value === 'number' ? value : null;
     if (value == null || min == null) { // loose
       return null;
     }
-    value = parseFloat(value);
     return !isNaN(value) && value < min ? { min: { min: min, actual: value } } : null;
   };
 }

package/src/forms/validators/pattern.validator.ts

@@ -5,11 +5,15 @@ import { FormValidator } from '../types';
  */
 export function PatternValidator(pattern: string | RegExp): FormValidator {
   return function (value) {
-    if (value == null || pattern == null) { // loose
+    if (pattern == null) { // loose
+      return null;
+    }
+    if (typeof value === 'string') {
+      const regex = patternToRegEx(pattern);
+      return regex.test(value) ? null : { pattern: { requiredPattern: regex.toString(), actualValue: value } };
+    } else {
       return null;
     }
-    const regex = patternToRegEx(pattern);
-    return regex.test(value) ? null : { pattern: { requiredPattern: regex.toString(), actualValue: value } };
   };
 }
 

package/src/forms/validators/required-if.validator.ts

@@ -1,14 +1,19 @@
+import { isArray } from '@websolutespa/bom-core';
 import { FormAbstract } from '../form-abstract';
-import { FormValidator } from '../types';
+import { FormValidator, FormValue } from '../types';
 
 /**
  * a required dependant on another field
  */
-export function RequiredIfValidator(condition: (value: any, rootValue: any, control?: FormAbstract, root?: FormAbstract) => boolean): FormValidator {
+export function RequiredIfValidator(condition: (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormAbstract) => boolean): FormValidator {
   return function (value, rootValue, control, root) {
-    // console.log('RequiredIfValidator', value, Boolean(condition(value)));
+    console.log('RequiredIfValidator', value, Boolean(condition(value, rootValue, control, root)));
     if (Boolean(condition(value, rootValue, control, root)) === true) {
-      return (value == null || value.length === 0) ? { required: true } : null;
+      if (isArray(value) || typeof value === 'string') {
+        return (value.length === 0) ? { required: true } : null;
+      } else {
+        return value == null ? { required: true } : null;
+      }
     } else {
       return null;
     }

package/src/forms/validators/required.validator.ts

@@ -1,3 +1,4 @@
+import { isArray } from '@websolutespa/bom-core';
 import { FormValidator } from '../types';
 
 /**
@@ -6,7 +7,11 @@ import { FormValidator } from '../types';
 export function RequiredValidator(): FormValidator {
   return function (value) {
     // console.log('RequiredValidator', value, (value == null || value.length === 0) ? { required: true } : null);
-    return value == null || value.length === 0 ? { required: true } : null;
+    if (isArray(value) || typeof value === 'string') {
+      return (value.length === 0) ? { required: true } : null;
+    } else {
+      return value == null ? { required: true } : null;
+    }
   };
   // return (value == null || value.length === 0) ? 'required' : null;
 }

package/src/hooks/useFormBuilder/useFormBuilder.ts

@@ -36,17 +36,23 @@ export function useFormBuilder<T, U extends (FormGroup | FormArray)>(
 
   useEffect(() => {
     const onChange = (value: T) => {
+      // console.log('useFormBuilder.onChange', value);
       const newState = { value, flags: collection.state, errors: mapErrors_(collection.errors) };
-      // console.log('useFormBuilder.onChange', newState);
       setState(newState);
     };
     collection.on('change', onChange);
-    collection.validateAndChange_();
+    // collection.validateAndChange_();
+    collection.revalidate_();
+    // const value = collection.value;
+    // collection.reset();
+    // collection.patch(value);
     // console.log('subscribe');
     return () => collection.off('change', onChange);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 
+  // console.log('useFormBuilder', collection.value);
+
   return [state, setValue, setTouched, reset, collection];
 }