@codegateinc/react-form-builder-v2 - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/react-form-builder-v2.cjs.development.js

@@ -39,4 +39,6 @@ 'use strict';
       initialValue = _ref.initialValue,
-      validationRules = _ref.validationRules,
-      isRequired = _ref.isRequired,
+      _ref$validationRules = _ref.validationRules,
+      validationRules = _ref$validationRules === void 0 ? [] : _ref$validationRules,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
       placeholder = _ref.placeholder,
@@ -53,5 +55,6 @@ _ref$validateOnBlur = _ref.validateOnBlur,
   var _useState2 = react.useState({
-    value: localInitialValue,
+    value: localInitialValue || '',
     isPristine: true,
-    errorMessage: ''
+    errorMessage: '',
+    hasError: false
   }),
@@ -67,3 +70,6 @@ field = _useState2[0],
     if (!forceCheck && field.isPristine || !validationRules) {
-      return '';
+      return {
+        errorMessage: '',
+        hasError: false
+      };
     }
@@ -74,7 +80,15 @@
     if (isRequired && ramda.isEmpty(val)) {
-      return validationRules[0].errorMessage;
+      var _validationRules$;
+
+      return {
+        errorMessage: (_validationRules$ = validationRules[0]) == null ? void 0 : _validationRules$.errorMessage,
+        hasError: true
+      };
     }
 
     if (!isRequired && !Boolean(val)) {
-      return '';
+      return {
+        errorMessage: '',
+        hasError: false
+      };
     }
@@ -85,3 +99,6 @@
     });
-    return firstError ? firstError.errorMessage : '';
+    return {
+      errorMessage: firstError ? firstError.errorMessage : '',
+      hasError: Boolean(firstError == null ? void 0 : firstError.errorMessage)
+    };
   };
@@ -96,2 +113,3 @@
     parentKey: '',
+    hasError: field.hasError,
     value: field.value,
@@ -101,15 +119,27 @@ hasChange: field.value !== localInitialValue,
     onBlur: function onBlur() {
-      return validateOnBlur && setField(function (prevState) {
-        return _extends({}, prevState, {
-          isPristine: false,
-          errorMessage: computeErrorMessage(undefined, true)
+      if (validateOnBlur) {
+        var _computeErrorMessage = computeErrorMessage(undefined, true),
+            errorMessage = _computeErrorMessage.errorMessage,
+            hasError = _computeErrorMessage.hasError;
+
+        setField(function (prevState) {
+          return _extends({}, prevState, {
+            isPristine: false,
+            errorMessage: errorMessage,
+            hasError: hasError
+          });
         });
-      });
+      }
     },
     onChangeValue: function onChangeValue(newValue) {
-      return setField(function (prevState) {
+      var _computeErrorMessage2 = computeErrorMessage(newValue, !validateOnBlur),
+          hasError = _computeErrorMessage2.hasError,
+          errorMessage = _computeErrorMessage2.errorMessage;
+
+      setField(function (prevState) {
         return _extends({}, prevState, {
           value: liveParser ? liveParser(newValue) : newValue,
           isPristine: prevState.isPristine ? validateOnBlur : prevState.isPristine,
-          errorMessage: computeErrorMessage(newValue)
+          errorMessage: errorMessage,
+          hasError: hasError
         });
@@ -130,14 +160,16 @@ });
     validateOnSubmit: function validateOnSubmit() {
-      var errorMessage = computeErrorMessage(undefined, true);
+      var _computeErrorMessage3 = computeErrorMessage(undefined, true),
+          hasError = _computeErrorMessage3.hasError,
+          errorMessage = _computeErrorMessage3.errorMessage;
 
-      if (errorMessage) {
-        setField(function (prevState) {
-          return _extends({}, prevState, {
-            errorMessage: errorMessage
-          });
+      setField(function (prevState) {
+        return _extends({}, prevState, {
+          errorMessage: errorMessage,
+          hasError: hasError
         });
-        return errorMessage;
-      }
-
-      return '';
+      });
+      return {
+        hasError: hasError,
+        errorMessage: errorMessage
+      };
     },
@@ -156,3 +188,3 @@ setError: function setError(errorMessage) {
           errorMessage: '',
-          value: initialValue
+          value: initialValue || ''
         });
@@ -162,5 +194,10 @@ });
     validate: function validate() {
-      return setField(function (prevState) {
+      var _computeErrorMessage4 = computeErrorMessage(undefined, true),
+          hasError = _computeErrorMessage4.hasError,
+          errorMessage = _computeErrorMessage4.errorMessage;
+
+      setField(function (prevState) {
         return _extends({}, prevState, {
-          errorMessage: computeErrorMessage(undefined, true)
+          errorMessage: errorMessage,
+          hasError: hasError
         });
@@ -185,3 +222,6 @@ });
     if (!forceCheck && field.isPristine || !field.validationRules) {
-      return '';
+      return {
+        errorMessage: '',
+        hasError: false
+      };
     }
@@ -192,7 +232,15 @@
     if (field.isRequired && ramda.isEmpty(val)) {
-      return field.validationRules[0].errorMessage;
+      var _field$validationRule;
+
+      return {
+        errorMessage: (_field$validationRule = field.validationRules[0]) == null ? void 0 : _field$validationRule.errorMessage,
+        hasError: true
+      };
     }
 
     if (!field.isRequired && !Boolean(val)) {
-      return '';
+      return {
+        errorMessage: '',
+        hasError: false
+      };
     }
@@ -203,3 +251,6 @@
     });
-    return firstError ? firstError.errorMessage : '';
+    return {
+      errorMessage: firstError ? firstError.errorMessage : '',
+      hasError: Boolean(firstError == null ? void 0 : firstError.errorMessage)
+    };
   };
@@ -212,2 +263,3 @@
     parentKey: parentKey,
+    hasError: prevState[fieldConfig.key].hasError,
     isRequired: fieldConfig.isRequired || false,
@@ -227,4 +279,9 @@ validateOnBlur: fieldConfig.validateOnBlur || false,
 
+        var _computeErrorMessage = computeErrorMessage(changedField, value),
+            errorMessage = _computeErrorMessage.errorMessage,
+            hasError = _computeErrorMessage.hasError;
+
         return _extends({}, prevState, (_extends2 = {}, _extends2[fieldConfig.key] = _extends({}, changedField, {
-          errorMessage: computeErrorMessage(changedField, value)
+          errorMessage: errorMessage,
+          hasError: hasError
         }), _extends2));
@@ -234,26 +291,35 @@ });
     onBlur: function onBlur() {
-      return fieldConfig.validateOnBlur && setState(function (prevState) {
-        var _extends3;
+      if (fieldConfig.validateOnBlur) {
+        var _computeErrorMessage2 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+            errorMessage = _computeErrorMessage2.errorMessage,
+            hasError = _computeErrorMessage2.hasError;
 
-        return _extends({}, prevState, (_extends3 = {}, _extends3[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
-          isPristine: false,
-          errorMessage: computeErrorMessage(prevState[fieldConfig.key], undefined, true)
-        }), _extends3));
-      });
-    },
-    validateOnSubmit: function validateOnSubmit() {
-      var errorMessage = computeErrorMessage(prevState[fieldConfig.key], undefined, true);
-
-      if (errorMessage) {
         setState(function (prevState) {
-          var _extends4;
+          var _extends3;
 
-          return _extends({}, prevState, (_extends4 = {}, _extends4[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
-            errorMessage: errorMessage
-          }), _extends4));
+          return _extends({}, prevState, (_extends3 = {}, _extends3[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
+            isPristine: false,
+            errorMessage: errorMessage,
+            hasError: hasError
+          }), _extends3));
         });
-        return errorMessage;
       }
+    },
+    validateOnSubmit: function validateOnSubmit() {
+      var _computeErrorMessage3 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+          errorMessage = _computeErrorMessage3.errorMessage,
+          hasError = _computeErrorMessage3.hasError;
 
-      return '';
+      setState(function (prevState) {
+        var _extends4;
+
+        return _extends({}, prevState, (_extends4 = {}, _extends4[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
+          errorMessage: errorMessage,
+          hasError: hasError
+        }), _extends4));
+      });
+      return {
+        errorMessage: errorMessage,
+        hasError: hasError
+      };
     },
@@ -293,7 +359,12 @@ onChangeInitialValue: function onChangeInitialValue(value) {
     validate: function validate() {
-      return setState(function (prevState) {
+      var _computeErrorMessage4 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+          hasError = _computeErrorMessage4.hasError,
+          errorMessage = _computeErrorMessage4.errorMessage;
+
+      setState(function (prevState) {
         var _extends8;
 
         return _extends({}, prevState, (_extends8 = {}, _extends8[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
-          errorMessage: computeErrorMessage(prevState[fieldConfig.key], undefined, true)
+          errorMessage: errorMessage,
+          hasError: hasError
         }), _extends8));
@@ -305,14 +376,2 @@ });
 
-var useFormValidator = function useFormValidator(formFields) {
-  var hasMissingOptions = formFields.some(function (field) {
-    return field.isRequired && Boolean(field.value);
-  });
-  var hasError = formFields.some(function (field) {
-    return !ramda.isEmpty(field.errorMessage);
-  });
-  return {
-    hasError: hasError || hasMissingOptions
-  };
-};
-
 function useForm(formFields, callbacks) {
@@ -331,5 +390,2 @@ var injectedForm = Object.entries(formFields).reduce(function (acc, _ref) {
 
-  var _useFormValidator = useFormValidator(Object.values(formFields)),
-      hasError = _useFormValidator.hasError;
-
   var form = _extends({}, injectedForm, Object.entries(innerForm).reduce(function (acc, _ref2) {
@@ -362,2 +418,8 @@ var field = _ref2[1];
 
+  var hasError = Object.values(form).filter(function (item) {
+    return item.isRequired;
+  }).some(function (item) {
+    return Boolean(item.errorMessage);
+  });
+
   var addFieldsRecurrence = function addFieldsRecurrence(field, prevState, parentKey) {
@@ -383,7 +445,2 @@ var _ref3;
     }),
-    isEachFieldValid: !Object.values(form).filter(function (item) {
-      return item.isRequired;
-    }).some(function (item) {
-      return Boolean(item.errorMessage);
-    }),
     formHasChanges: function formHasChanges() {
@@ -435,5 +492,9 @@ return Object.values(form).some(function (field) {
       var errors = Object.values(form).map(function (field) {
+        var _field$validateOnSubm = field.validateOnSubmit(),
+            hasError = _field$validateOnSubm.hasError,
+            errorMessage = _field$validateOnSubm.errorMessage;
+
         return {
           key: field.key,
-          errorMessage: field.validateOnSubmit()
+          errorMessage: errorMessage || (hasError ? 'This field is required' : '')
         };
@@ -440,0 +501,0 @@ }).filter(function (field) {

dist/react-form-builder-v2.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("ramda");function n(){return(n=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var t=function(e){return null!=e},i=function(e,r){return t(e)&&r(e)};exports.useField=function(i){var u=i.key,a=i.label,o=i.initialValue,s=i.validationRules,l=i.isRequired,c=i.placeholder,f=i.validateOnBlur,v=void 0!==f&&f,d=i.liveParser,g=i.submitParser,y=e.useState(o),h=y[0],k=y[1],M=e.useState({value:h,isPristine:!0,errorMessage:""}),b=M[0],O=M[1],P=function(e,n){if(void 0===n&&(n=!1),!n&&b.isPristine||!s)return"";var i=t(e)?e:b.value;if(l&&r.isEmpty(i))return s[0].errorMessage;if(!l&&!Boolean(i))return"";var u=s.find((function(e){return!e.validate(i)}));return u?u.errorMessage:""};return{key:u,label:a,isRequired:l,placeholder:c,submitParser:g,parentKey:"",value:b.value,hasChange:b.value!==h,errorMessage:b.errorMessage,onBlur:function(){return v&&O((function(e){return n({},e,{isPristine:!1,errorMessage:P(void 0,!0)})}))},onChangeValue:function(e){return O((function(r){return n({},r,{value:d?d(e):e,isPristine:r.isPristine?v:r.isPristine,errorMessage:P(e)})}))},onChangeInitialValue:function(e){b.value===h&&O((function(r){return n({},r,{value:e})})),k(e)},validateOnSubmit:function(){var e=P(void 0,!0);return e?(O((function(r){return n({},r,{errorMessage:e})})),e):""},setError:function(e){return O((function(r){return n({},r,{errorMessage:e})}))},resetState:function(){return O((function(e){return n({},e,{isPristine:!0,errorMessage:"",value:o})}))},validate:function(){return O((function(e){return n({},e,{errorMessage:P(void 0,!0)})}))}}},exports.useForm=function(u,a){var o=Object.entries(u).reduce((function(e,r){var t;return n({},e,((t={})[r[0]]=r[1],t))}),{}),s=e.useState({}),l=s[0],c=s[1],f=function(e){var n=e.some((function(e){return e.isRequired&&Boolean(e.value)}));return{hasError:e.some((function(e){return!r.isEmpty(e.errorMessage)}))||n}}(Object.values(u)).hasError,v=n({},o,Object.entries(l).reduce((function(e,r){var t=r[1],i=t.parentKey.split(".").filter(Boolean);if(i.length>0){var u=i.reduce((function(r,u,a){var o,s;return n({},e,r,((s={})[u]=n({},e[u],r[u]||{},a===i.length-1?{children:[].concat((null==(o=r[u])?void 0:o.children)||[],[t])}:{}),s))}),{}),a=Object.keys(u).filter((function(e){return Object.keys(u[e]).length})).reduce((function(e,r){var t;return n({},e,((t={})[r]=u[r],t))}),{});return n({},e,a)}return n({},e,{field:t})}),{}));return{form:v,hasError:f,isFilled:Object.values(v).filter((function(e){return e.isRequired})).every((function(e){return e.hasChange})),isEachFieldValid:!Object.values(v).filter((function(e){return e.isRequired})).some((function(e){return Boolean(e.errorMessage)})),formHasChanges:function(){return Object.values(v).some((function(e){return e.hasChange}))},setError:function(e,r){v[e].setError(r),i(a.onError,(function(n){var t;return n(((t={})[e]=r,t))}))},setFieldValue:function(e,r){v[e].onChangeValue(r)},setFieldInitialValue:function(e,r){v[e].onChangeInitialValue(r)},addFields:function(e){return c((function(i){return n({},i,e.reduce((function(e,u){return n({},e,function e(i,u,a){var o;return i.children?i.children.reduce((function(r,t){return n({},r,e(t,u,a+"."+i.key))}),{}):((o={})[i.key]=function(e,i,u,a){var o;void 0===a&&(a="");var s=function(e,n,i){if(void 0===i&&(i=!1),!i&&e.isPristine||!e.validationRules)return"";var u=t(n)?n:e.value;if(e.isRequired&&r.isEmpty(u))return e.validationRules[0].errorMessage;if(!e.isRequired&&!Boolean(u))return"";var a=e.validationRules.find((function(e){return!e.validate(u)}));return a?a.errorMessage:""};return n({},e,{value:"",hasChange:!1,isPristine:!0,parentKey:a,isRequired:e.isRequired||!1,validateOnBlur:e.validateOnBlur||!1,localInitialValue:e.initialValue||"",errorMessage:null==(o=i[e.key])?void 0:o.errorMessage,onChangeValue:function(r){return u((function(t){var i,u,a=n({},t[e.key],{value:e.liveParser?e.liveParser(r):r,hasChange:r!==(null==(i=t[e.key])?void 0:i.localInitialValue),isPristine:t[e.key].isPristine?e.validateOnBlur||!1:t[e.key].isPristine});return n({},t,((u={})[e.key]=n({},a,{errorMessage:s(a,r)}),u))}))},onBlur:function(){return e.validateOnBlur&&u((function(r){var t;return n({},r,((t={})[e.key]=n({},r[e.key],{isPristine:!1,errorMessage:s(r[e.key],void 0,!0)}),t))}))},validateOnSubmit:function(){var r=s(i[e.key],void 0,!0);return r?(u((function(t){var i;return n({},t,((i={})[e.key]=n({},t[e.key],{errorMessage:r}),i))})),r):""},onChangeInitialValue:function(r){i.value===i.localInitialValue&&u((function(t){var i;return n({},t,((i={})[e.key]=n({},t[e.key],{value:r,localInitialValue:r}),i))}))},setError:function(r){return u((function(t){var i;return n({},t,((i={})[e.key]=n({},t[e.key],{errorMessage:r}),i))}))},resetState:function(){return u((function(r){var t;return n({},r,((t={})[e.key]=n({},r[e.key],{isPristine:!0,errorMessage:"",value:e.initialValue||""}),t))}))},validate:function(){return u((function(r){var t;return n({},r,((t={})[e.key]=n({},r[e.key],{errorMessage:s(r[e.key],void 0,!0)}),t))}))}})}(i,u,c,a),o)}(u,i,""))}),{}))}))},removeFieldIds:function(e){return c((function(r){return Object.keys(r).reduce((function(t,i){var u;return e.includes(i)?t:n({},t,((u={})[i]=r[i],u))}),{})}))},resetForm:function(){return Object.keys(v).forEach((function(e){return v[e].resetState()}))},submit:function(){var e=Object.values(v).map((function(e){return{key:e.key,errorMessage:e.validateOnSubmit()}})).filter((function(e){return Boolean(e.errorMessage)})).reduce((function(e,r){var t;return n({},e,((t={})[r.key]=r.errorMessage,t))}),{});if(Object.values(e).length>0)return i(a.onError,(function(r){return r(e)}));var r=Object.values(v).reduce((function(e,r){var t,i=r.value,u=r.submitParser;return n({},e,((t={})[r.key]=u?u(i):i,t))}),{});a.onSuccess(r)},validateAll:function(){return Object.values(v).forEach((function(e){return e.validate()}))}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),e=require("ramda");function n(){return(n=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(r[a]=n[a])}return r}).apply(this,arguments)}var a=function(r){return null!=r},t=function(r,e){return a(r)&&e(r)};exports.useField=function(t){var i=t.key,u=t.label,s=t.initialValue,o=t.validationRules,l=void 0===o?[]:o,c=t.isRequired,v=void 0!==c&&c,f=t.placeholder,d=t.validateOnBlur,h=void 0!==d&&d,g=t.liveParser,M=t.submitParser,y=r.useState(s),E=y[0],k=y[1],b=r.useState({value:E||"",isPristine:!0,errorMessage:"",hasError:!1}),O=b[0],P=b[1],m=function(r,n){if(void 0===n&&(n=!1),!n&&O.isPristine||!l)return{errorMessage:"",hasError:!1};var t,i=a(r)?r:O.value;if(v&&e.isEmpty(i))return{errorMessage:null==(t=l[0])?void 0:t.errorMessage,hasError:!0};if(!v&&!Boolean(i))return{errorMessage:"",hasError:!1};var u=l.find((function(r){return!r.validate(i)}));return{errorMessage:u?u.errorMessage:"",hasError:Boolean(null==u?void 0:u.errorMessage)}};return{key:i,label:u,isRequired:v,placeholder:f,submitParser:M,parentKey:"",hasError:O.hasError,value:O.value,hasChange:O.value!==E,errorMessage:O.errorMessage,onBlur:function(){if(h){var r=m(void 0,!0),e=r.errorMessage,a=r.hasError;P((function(r){return n({},r,{isPristine:!1,errorMessage:e,hasError:a})}))}},onChangeValue:function(r){var e=m(r,!h),a=e.hasError,t=e.errorMessage;P((function(e){return n({},e,{value:g?g(r):r,isPristine:e.isPristine?h:e.isPristine,errorMessage:t,hasError:a})}))},onChangeInitialValue:function(r){O.value===E&&P((function(e){return n({},e,{value:r})})),k(r)},validateOnSubmit:function(){var r=m(void 0,!0),e=r.hasError,a=r.errorMessage;return P((function(r){return n({},r,{errorMessage:a,hasError:e})})),{hasError:e,errorMessage:a}},setError:function(r){return P((function(e){return n({},e,{errorMessage:r})}))},resetState:function(){return P((function(r){return n({},r,{isPristine:!0,errorMessage:"",value:s||""})}))},validate:function(){var r=m(void 0,!0),e=r.hasError,a=r.errorMessage;P((function(r){return n({},r,{errorMessage:a,hasError:e})}))}}},exports.useForm=function(i,u){var s=Object.entries(i).reduce((function(r,e){var a;return n({},r,((a={})[e[0]]=e[1],a))}),{}),o=r.useState({}),l=o[1],c=n({},s,Object.entries(o[0]).reduce((function(r,e){var a=e[1],t=a.parentKey.split(".").filter(Boolean);if(t.length>0){var i=t.reduce((function(e,i,u){var s,o;return n({},r,e,((o={})[i]=n({},r[i],e[i]||{},u===t.length-1?{children:[].concat((null==(s=e[i])?void 0:s.children)||[],[a])}:{}),o))}),{}),u=Object.keys(i).filter((function(r){return Object.keys(i[r]).length})).reduce((function(r,e){var a;return n({},r,((a={})[e]=i[e],a))}),{});return n({},r,u)}return n({},r,{field:a})}),{})),v=Object.values(c).filter((function(r){return r.isRequired})).some((function(r){return Boolean(r.errorMessage)}));return{form:c,hasError:v,isFilled:Object.values(c).filter((function(r){return r.isRequired})).every((function(r){return r.hasChange})),formHasChanges:function(){return Object.values(c).some((function(r){return r.hasChange}))},setError:function(r,e){c[r].setError(e),t(u.onError,(function(n){var a;return n(((a={})[r]=e,a))}))},setFieldValue:function(r,e){c[r].onChangeValue(e)},setFieldInitialValue:function(r,e){c[r].onChangeInitialValue(e)},addFields:function(r){return l((function(t){return n({},t,r.reduce((function(r,i){return n({},r,function r(t,i,u){var s;return t.children?t.children.reduce((function(e,a){return n({},e,r(a,i,u+"."+t.key))}),{}):((s={})[t.key]=function(r,t,i,u){var s;void 0===u&&(u="");var o=function(r,n,t){if(void 0===t&&(t=!1),!t&&r.isPristine||!r.validationRules)return{errorMessage:"",hasError:!1};var i,u=a(n)?n:r.value;if(r.isRequired&&e.isEmpty(u))return{errorMessage:null==(i=r.validationRules[0])?void 0:i.errorMessage,hasError:!0};if(!r.isRequired&&!Boolean(u))return{errorMessage:"",hasError:!1};var s=r.validationRules.find((function(r){return!r.validate(u)}));return{errorMessage:s?s.errorMessage:"",hasError:Boolean(null==s?void 0:s.errorMessage)}};return n({},r,{value:"",hasChange:!1,isPristine:!0,parentKey:u,hasError:t[r.key].hasError,isRequired:r.isRequired||!1,validateOnBlur:r.validateOnBlur||!1,localInitialValue:r.initialValue||"",errorMessage:null==(s=t[r.key])?void 0:s.errorMessage,onChangeValue:function(e){return i((function(a){var t,i,u=n({},a[r.key],{value:r.liveParser?r.liveParser(e):e,hasChange:e!==(null==(t=a[r.key])?void 0:t.localInitialValue),isPristine:a[r.key].isPristine?r.validateOnBlur||!1:a[r.key].isPristine}),s=o(u,e);return n({},a,((i={})[r.key]=n({},u,{errorMessage:s.errorMessage,hasError:s.hasError}),i))}))},onBlur:function(){if(r.validateOnBlur){var e=o(t[r.key],void 0,!0),a=e.errorMessage,u=e.hasError;i((function(e){var t;return n({},e,((t={})[r.key]=n({},e[r.key],{isPristine:!1,errorMessage:a,hasError:u}),t))}))}},validateOnSubmit:function(){var e=o(t[r.key],void 0,!0),a=e.errorMessage,u=e.hasError;return i((function(e){var t;return n({},e,((t={})[r.key]=n({},e[r.key],{errorMessage:a,hasError:u}),t))})),{errorMessage:a,hasError:u}},onChangeInitialValue:function(e){t.value===t.localInitialValue&&i((function(a){var t;return n({},a,((t={})[r.key]=n({},a[r.key],{value:e,localInitialValue:e}),t))}))},setError:function(e){return i((function(a){var t;return n({},a,((t={})[r.key]=n({},a[r.key],{errorMessage:e}),t))}))},resetState:function(){return i((function(e){var a;return n({},e,((a={})[r.key]=n({},e[r.key],{isPristine:!0,errorMessage:"",value:r.initialValue||""}),a))}))},validate:function(){var e=o(t[r.key],void 0,!0),a=e.hasError,u=e.errorMessage;i((function(e){var t;return n({},e,((t={})[r.key]=n({},e[r.key],{errorMessage:u,hasError:a}),t))}))}})}(t,i,l,u),s)}(i,t,""))}),{}))}))},removeFieldIds:function(r){return l((function(e){return Object.keys(e).reduce((function(a,t){var i;return r.includes(t)?a:n({},a,((i={})[t]=e[t],i))}),{})}))},resetForm:function(){return Object.keys(c).forEach((function(r){return c[r].resetState()}))},submit:function(){var r=Object.values(c).map((function(r){var e=r.validateOnSubmit();return{key:r.key,errorMessage:e.errorMessage||(e.hasError?"This field is required":"")}})).filter((function(r){return Boolean(r.errorMessage)})).reduce((function(r,e){var a;return n({},r,((a={})[e.key]=e.errorMessage,a))}),{});if(Object.values(r).length>0)return t(u.onError,(function(e){return e(r)}));var e=Object.values(c).reduce((function(r,e){var a,t=e.value,i=e.submitParser;return n({},r,((a={})[e.key]=i?i(t):t,a))}),{});u.onSuccess(e)},validateAll:function(){return Object.values(c).forEach((function(r){return r.validate()}))}}};
 //# sourceMappingURL=react-form-builder-v2.cjs.production.min.js.map

dist/react-form-builder-v2.esm.js

@@ -35,4 +35,6 @@ import { useState } from 'react';
       initialValue = _ref.initialValue,
-      validationRules = _ref.validationRules,
-      isRequired = _ref.isRequired,
+      _ref$validationRules = _ref.validationRules,
+      validationRules = _ref$validationRules === void 0 ? [] : _ref$validationRules,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
       placeholder = _ref.placeholder,
@@ -49,5 +51,6 @@ _ref$validateOnBlur = _ref.validateOnBlur,
   var _useState2 = useState({
-    value: localInitialValue,
+    value: localInitialValue || '',
     isPristine: true,
-    errorMessage: ''
+    errorMessage: '',
+    hasError: false
   }),
@@ -63,3 +66,6 @@ field = _useState2[0],
     if (!forceCheck && field.isPristine || !validationRules) {
-      return '';
+      return {
+        errorMessage: '',
+        hasError: false
+      };
     }
@@ -70,7 +76,15 @@
     if (isRequired && isEmpty(val)) {
-      return validationRules[0].errorMessage;
+      var _validationRules$;
+
+      return {
+        errorMessage: (_validationRules$ = validationRules[0]) == null ? void 0 : _validationRules$.errorMessage,
+        hasError: true
+      };
     }
 
     if (!isRequired && !Boolean(val)) {
-      return '';
+      return {
+        errorMessage: '',
+        hasError: false
+      };
     }
@@ -81,3 +95,6 @@
     });
-    return firstError ? firstError.errorMessage : '';
+    return {
+      errorMessage: firstError ? firstError.errorMessage : '',
+      hasError: Boolean(firstError == null ? void 0 : firstError.errorMessage)
+    };
   };
@@ -92,2 +109,3 @@
     parentKey: '',
+    hasError: field.hasError,
     value: field.value,
@@ -97,15 +115,27 @@ hasChange: field.value !== localInitialValue,
     onBlur: function onBlur() {
-      return validateOnBlur && setField(function (prevState) {
-        return _extends({}, prevState, {
-          isPristine: false,
-          errorMessage: computeErrorMessage(undefined, true)
+      if (validateOnBlur) {
+        var _computeErrorMessage = computeErrorMessage(undefined, true),
+            errorMessage = _computeErrorMessage.errorMessage,
+            hasError = _computeErrorMessage.hasError;
+
+        setField(function (prevState) {
+          return _extends({}, prevState, {
+            isPristine: false,
+            errorMessage: errorMessage,
+            hasError: hasError
+          });
         });
-      });
+      }
     },
     onChangeValue: function onChangeValue(newValue) {
-      return setField(function (prevState) {
+      var _computeErrorMessage2 = computeErrorMessage(newValue, !validateOnBlur),
+          hasError = _computeErrorMessage2.hasError,
+          errorMessage = _computeErrorMessage2.errorMessage;
+
+      setField(function (prevState) {
         return _extends({}, prevState, {
           value: liveParser ? liveParser(newValue) : newValue,
           isPristine: prevState.isPristine ? validateOnBlur : prevState.isPristine,
-          errorMessage: computeErrorMessage(newValue)
+          errorMessage: errorMessage,
+          hasError: hasError
         });
@@ -126,14 +156,16 @@ });
     validateOnSubmit: function validateOnSubmit() {
-      var errorMessage = computeErrorMessage(undefined, true);
+      var _computeErrorMessage3 = computeErrorMessage(undefined, true),
+          hasError = _computeErrorMessage3.hasError,
+          errorMessage = _computeErrorMessage3.errorMessage;
 
-      if (errorMessage) {
-        setField(function (prevState) {
-          return _extends({}, prevState, {
-            errorMessage: errorMessage
-          });
+      setField(function (prevState) {
+        return _extends({}, prevState, {
+          errorMessage: errorMessage,
+          hasError: hasError
         });
-        return errorMessage;
-      }
-
-      return '';
+      });
+      return {
+        hasError: hasError,
+        errorMessage: errorMessage
+      };
     },
@@ -152,3 +184,3 @@ setError: function setError(errorMessage) {
           errorMessage: '',
-          value: initialValue
+          value: initialValue || ''
         });
@@ -158,5 +190,10 @@ });
     validate: function validate() {
-      return setField(function (prevState) {
+      var _computeErrorMessage4 = computeErrorMessage(undefined, true),
+          hasError = _computeErrorMessage4.hasError,
+          errorMessage = _computeErrorMessage4.errorMessage;
+
+      setField(function (prevState) {
         return _extends({}, prevState, {
-          errorMessage: computeErrorMessage(undefined, true)
+          errorMessage: errorMessage,
+          hasError: hasError
         });
@@ -181,3 +218,6 @@ });
     if (!forceCheck && field.isPristine || !field.validationRules) {
-      return '';
+      return {
+        errorMessage: '',
+        hasError: false
+      };
     }
@@ -188,7 +228,15 @@
     if (field.isRequired && isEmpty(val)) {
-      return field.validationRules[0].errorMessage;
+      var _field$validationRule;
+
+      return {
+        errorMessage: (_field$validationRule = field.validationRules[0]) == null ? void 0 : _field$validationRule.errorMessage,
+        hasError: true
+      };
     }
 
     if (!field.isRequired && !Boolean(val)) {
-      return '';
+      return {
+        errorMessage: '',
+        hasError: false
+      };
     }
@@ -199,3 +247,6 @@
     });
-    return firstError ? firstError.errorMessage : '';
+    return {
+      errorMessage: firstError ? firstError.errorMessage : '',
+      hasError: Boolean(firstError == null ? void 0 : firstError.errorMessage)
+    };
   };
@@ -208,2 +259,3 @@
     parentKey: parentKey,
+    hasError: prevState[fieldConfig.key].hasError,
     isRequired: fieldConfig.isRequired || false,
@@ -223,4 +275,9 @@ validateOnBlur: fieldConfig.validateOnBlur || false,
 
+        var _computeErrorMessage = computeErrorMessage(changedField, value),
+            errorMessage = _computeErrorMessage.errorMessage,
+            hasError = _computeErrorMessage.hasError;
+
         return _extends({}, prevState, (_extends2 = {}, _extends2[fieldConfig.key] = _extends({}, changedField, {
-          errorMessage: computeErrorMessage(changedField, value)
+          errorMessage: errorMessage,
+          hasError: hasError
         }), _extends2));
@@ -230,26 +287,35 @@ });
     onBlur: function onBlur() {
-      return fieldConfig.validateOnBlur && setState(function (prevState) {
-        var _extends3;
+      if (fieldConfig.validateOnBlur) {
+        var _computeErrorMessage2 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+            errorMessage = _computeErrorMessage2.errorMessage,
+            hasError = _computeErrorMessage2.hasError;
 
-        return _extends({}, prevState, (_extends3 = {}, _extends3[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
-          isPristine: false,
-          errorMessage: computeErrorMessage(prevState[fieldConfig.key], undefined, true)
-        }), _extends3));
-      });
-    },
-    validateOnSubmit: function validateOnSubmit() {
-      var errorMessage = computeErrorMessage(prevState[fieldConfig.key], undefined, true);
-
-      if (errorMessage) {
         setState(function (prevState) {
-          var _extends4;
+          var _extends3;
 
-          return _extends({}, prevState, (_extends4 = {}, _extends4[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
-            errorMessage: errorMessage
-          }), _extends4));
+          return _extends({}, prevState, (_extends3 = {}, _extends3[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
+            isPristine: false,
+            errorMessage: errorMessage,
+            hasError: hasError
+          }), _extends3));
         });
-        return errorMessage;
       }
+    },
+    validateOnSubmit: function validateOnSubmit() {
+      var _computeErrorMessage3 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+          errorMessage = _computeErrorMessage3.errorMessage,
+          hasError = _computeErrorMessage3.hasError;
 
-      return '';
+      setState(function (prevState) {
+        var _extends4;
+
+        return _extends({}, prevState, (_extends4 = {}, _extends4[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
+          errorMessage: errorMessage,
+          hasError: hasError
+        }), _extends4));
+      });
+      return {
+        errorMessage: errorMessage,
+        hasError: hasError
+      };
     },
@@ -289,7 +355,12 @@ onChangeInitialValue: function onChangeInitialValue(value) {
     validate: function validate() {
-      return setState(function (prevState) {
+      var _computeErrorMessage4 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+          hasError = _computeErrorMessage4.hasError,
+          errorMessage = _computeErrorMessage4.errorMessage;
+
+      setState(function (prevState) {
         var _extends8;
 
         return _extends({}, prevState, (_extends8 = {}, _extends8[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
-          errorMessage: computeErrorMessage(prevState[fieldConfig.key], undefined, true)
+          errorMessage: errorMessage,
+          hasError: hasError
         }), _extends8));
@@ -301,14 +372,2 @@ });
 
-var useFormValidator = function useFormValidator(formFields) {
-  var hasMissingOptions = formFields.some(function (field) {
-    return field.isRequired && Boolean(field.value);
-  });
-  var hasError = formFields.some(function (field) {
-    return !isEmpty(field.errorMessage);
-  });
-  return {
-    hasError: hasError || hasMissingOptions
-  };
-};
-
 function useForm(formFields, callbacks) {
@@ -327,5 +386,2 @@ var injectedForm = Object.entries(formFields).reduce(function (acc, _ref) {
 
-  var _useFormValidator = useFormValidator(Object.values(formFields)),
-      hasError = _useFormValidator.hasError;
-
   var form = _extends({}, injectedForm, Object.entries(innerForm).reduce(function (acc, _ref2) {
@@ -358,2 +414,8 @@ var field = _ref2[1];
 
+  var hasError = Object.values(form).filter(function (item) {
+    return item.isRequired;
+  }).some(function (item) {
+    return Boolean(item.errorMessage);
+  });
+
   var addFieldsRecurrence = function addFieldsRecurrence(field, prevState, parentKey) {
@@ -379,7 +441,2 @@ var _ref3;
     }),
-    isEachFieldValid: !Object.values(form).filter(function (item) {
-      return item.isRequired;
-    }).some(function (item) {
-      return Boolean(item.errorMessage);
-    }),
     formHasChanges: function formHasChanges() {
@@ -431,5 +488,9 @@ return Object.values(form).some(function (field) {
       var errors = Object.values(form).map(function (field) {
+        var _field$validateOnSubm = field.validateOnSubmit(),
+            hasError = _field$validateOnSubm.hasError,
+            errorMessage = _field$validateOnSubm.errorMessage;
+
         return {
           key: field.key,
-          errorMessage: field.validateOnSubmit()
+          errorMessage: errorMessage || (hasError ? 'This field is required' : '')
         };
@@ -436,0 +497,0 @@ }).filter(function (field) {

dist/react-form-builder-v2.umd.development.js

@@ -38,4 +38,6 @@ (function (global, factory) {
         initialValue = _ref.initialValue,
-        validationRules = _ref.validationRules,
-        isRequired = _ref.isRequired,
+        _ref$validationRules = _ref.validationRules,
+        validationRules = _ref$validationRules === void 0 ? [] : _ref$validationRules,
+        _ref$isRequired = _ref.isRequired,
+        isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
         placeholder = _ref.placeholder,
@@ -52,5 +54,6 @@ _ref$validateOnBlur = _ref.validateOnBlur,
     var _useState2 = react.useState({
-      value: localInitialValue,
+      value: localInitialValue || '',
       isPristine: true,
-      errorMessage: ''
+      errorMessage: '',
+      hasError: false
     }),
@@ -66,3 +69,6 @@ field = _useState2[0],
       if (!forceCheck && field.isPristine || !validationRules) {
-        return '';
+        return {
+          errorMessage: '',
+          hasError: false
+        };
       }
@@ -73,7 +79,15 @@
       if (isRequired && ramda.isEmpty(val)) {
-        return validationRules[0].errorMessage;
+        var _validationRules$;
+
+        return {
+          errorMessage: (_validationRules$ = validationRules[0]) == null ? void 0 : _validationRules$.errorMessage,
+          hasError: true
+        };
       }
 
       if (!isRequired && !Boolean(val)) {
-        return '';
+        return {
+          errorMessage: '',
+          hasError: false
+        };
       }
@@ -84,3 +98,6 @@
       });
-      return firstError ? firstError.errorMessage : '';
+      return {
+        errorMessage: firstError ? firstError.errorMessage : '',
+        hasError: Boolean(firstError == null ? void 0 : firstError.errorMessage)
+      };
     };
@@ -95,2 +112,3 @@
       parentKey: '',
+      hasError: field.hasError,
       value: field.value,
@@ -100,15 +118,27 @@ hasChange: field.value !== localInitialValue,
       onBlur: function onBlur() {
-        return validateOnBlur && setField(function (prevState) {
-          return _extends({}, prevState, {
-            isPristine: false,
-            errorMessage: computeErrorMessage(undefined, true)
+        if (validateOnBlur) {
+          var _computeErrorMessage = computeErrorMessage(undefined, true),
+              errorMessage = _computeErrorMessage.errorMessage,
+              hasError = _computeErrorMessage.hasError;
+
+          setField(function (prevState) {
+            return _extends({}, prevState, {
+              isPristine: false,
+              errorMessage: errorMessage,
+              hasError: hasError
+            });
           });
-        });
+        }
       },
       onChangeValue: function onChangeValue(newValue) {
-        return setField(function (prevState) {
+        var _computeErrorMessage2 = computeErrorMessage(newValue, !validateOnBlur),
+            hasError = _computeErrorMessage2.hasError,
+            errorMessage = _computeErrorMessage2.errorMessage;
+
+        setField(function (prevState) {
           return _extends({}, prevState, {
             value: liveParser ? liveParser(newValue) : newValue,
             isPristine: prevState.isPristine ? validateOnBlur : prevState.isPristine,
-            errorMessage: computeErrorMessage(newValue)
+            errorMessage: errorMessage,
+            hasError: hasError
           });
@@ -129,14 +159,16 @@ });
       validateOnSubmit: function validateOnSubmit() {
-        var errorMessage = computeErrorMessage(undefined, true);
+        var _computeErrorMessage3 = computeErrorMessage(undefined, true),
+            hasError = _computeErrorMessage3.hasError,
+            errorMessage = _computeErrorMessage3.errorMessage;
 
-        if (errorMessage) {
-          setField(function (prevState) {
-            return _extends({}, prevState, {
-              errorMessage: errorMessage
-            });
+        setField(function (prevState) {
+          return _extends({}, prevState, {
+            errorMessage: errorMessage,
+            hasError: hasError
           });
-          return errorMessage;
-        }
-
-        return '';
+        });
+        return {
+          hasError: hasError,
+          errorMessage: errorMessage
+        };
       },
@@ -155,3 +187,3 @@ setError: function setError(errorMessage) {
             errorMessage: '',
-            value: initialValue
+            value: initialValue || ''
           });
@@ -161,5 +193,10 @@ });
       validate: function validate() {
-        return setField(function (prevState) {
+        var _computeErrorMessage4 = computeErrorMessage(undefined, true),
+            hasError = _computeErrorMessage4.hasError,
+            errorMessage = _computeErrorMessage4.errorMessage;
+
+        setField(function (prevState) {
           return _extends({}, prevState, {
-            errorMessage: computeErrorMessage(undefined, true)
+            errorMessage: errorMessage,
+            hasError: hasError
           });
@@ -184,3 +221,6 @@ });
       if (!forceCheck && field.isPristine || !field.validationRules) {
-        return '';
+        return {
+          errorMessage: '',
+          hasError: false
+        };
       }
@@ -191,7 +231,15 @@
       if (field.isRequired && ramda.isEmpty(val)) {
-        return field.validationRules[0].errorMessage;
+        var _field$validationRule;
+
+        return {
+          errorMessage: (_field$validationRule = field.validationRules[0]) == null ? void 0 : _field$validationRule.errorMessage,
+          hasError: true
+        };
       }
 
       if (!field.isRequired && !Boolean(val)) {
-        return '';
+        return {
+          errorMessage: '',
+          hasError: false
+        };
       }
@@ -202,3 +250,6 @@
       });
-      return firstError ? firstError.errorMessage : '';
+      return {
+        errorMessage: firstError ? firstError.errorMessage : '',
+        hasError: Boolean(firstError == null ? void 0 : firstError.errorMessage)
+      };
     };
@@ -211,2 +262,3 @@
       parentKey: parentKey,
+      hasError: prevState[fieldConfig.key].hasError,
       isRequired: fieldConfig.isRequired || false,
@@ -226,4 +278,9 @@ validateOnBlur: fieldConfig.validateOnBlur || false,
 
+          var _computeErrorMessage = computeErrorMessage(changedField, value),
+              errorMessage = _computeErrorMessage.errorMessage,
+              hasError = _computeErrorMessage.hasError;
+
           return _extends({}, prevState, (_extends2 = {}, _extends2[fieldConfig.key] = _extends({}, changedField, {
-            errorMessage: computeErrorMessage(changedField, value)
+            errorMessage: errorMessage,
+            hasError: hasError
           }), _extends2));
@@ -233,26 +290,35 @@ });
       onBlur: function onBlur() {
-        return fieldConfig.validateOnBlur && setState(function (prevState) {
-          var _extends3;
+        if (fieldConfig.validateOnBlur) {
+          var _computeErrorMessage2 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+              errorMessage = _computeErrorMessage2.errorMessage,
+              hasError = _computeErrorMessage2.hasError;
 
-          return _extends({}, prevState, (_extends3 = {}, _extends3[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
-            isPristine: false,
-            errorMessage: computeErrorMessage(prevState[fieldConfig.key], undefined, true)
-          }), _extends3));
-        });
-      },
-      validateOnSubmit: function validateOnSubmit() {
-        var errorMessage = computeErrorMessage(prevState[fieldConfig.key], undefined, true);
-
-        if (errorMessage) {
           setState(function (prevState) {
-            var _extends4;
+            var _extends3;
 
-            return _extends({}, prevState, (_extends4 = {}, _extends4[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
-              errorMessage: errorMessage
-            }), _extends4));
+            return _extends({}, prevState, (_extends3 = {}, _extends3[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
+              isPristine: false,
+              errorMessage: errorMessage,
+              hasError: hasError
+            }), _extends3));
           });
-          return errorMessage;
         }
+      },
+      validateOnSubmit: function validateOnSubmit() {
+        var _computeErrorMessage3 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+            errorMessage = _computeErrorMessage3.errorMessage,
+            hasError = _computeErrorMessage3.hasError;
 
-        return '';
+        setState(function (prevState) {
+          var _extends4;
+
+          return _extends({}, prevState, (_extends4 = {}, _extends4[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
+            errorMessage: errorMessage,
+            hasError: hasError
+          }), _extends4));
+        });
+        return {
+          errorMessage: errorMessage,
+          hasError: hasError
+        };
       },
@@ -292,7 +358,12 @@ onChangeInitialValue: function onChangeInitialValue(value) {
       validate: function validate() {
-        return setState(function (prevState) {
+        var _computeErrorMessage4 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+            hasError = _computeErrorMessage4.hasError,
+            errorMessage = _computeErrorMessage4.errorMessage;
+
+        setState(function (prevState) {
           var _extends8;
 
           return _extends({}, prevState, (_extends8 = {}, _extends8[fieldConfig.key] = _extends({}, prevState[fieldConfig.key], {
-            errorMessage: computeErrorMessage(prevState[fieldConfig.key], undefined, true)
+            errorMessage: errorMessage,
+            hasError: hasError
           }), _extends8));
@@ -304,14 +375,2 @@ });
 
-  var useFormValidator = function useFormValidator(formFields) {
-    var hasMissingOptions = formFields.some(function (field) {
-      return field.isRequired && Boolean(field.value);
-    });
-    var hasError = formFields.some(function (field) {
-      return !ramda.isEmpty(field.errorMessage);
-    });
-    return {
-      hasError: hasError || hasMissingOptions
-    };
-  };
-
   function useForm(formFields, callbacks) {
@@ -330,5 +389,2 @@ var injectedForm = Object.entries(formFields).reduce(function (acc, _ref) {
 
-    var _useFormValidator = useFormValidator(Object.values(formFields)),
-        hasError = _useFormValidator.hasError;
-
     var form = _extends({}, injectedForm, Object.entries(innerForm).reduce(function (acc, _ref2) {
@@ -361,2 +417,8 @@ var field = _ref2[1];
 
+    var hasError = Object.values(form).filter(function (item) {
+      return item.isRequired;
+    }).some(function (item) {
+      return Boolean(item.errorMessage);
+    });
+
     var addFieldsRecurrence = function addFieldsRecurrence(field, prevState, parentKey) {
@@ -382,7 +444,2 @@ var _ref3;
       }),
-      isEachFieldValid: !Object.values(form).filter(function (item) {
-        return item.isRequired;
-      }).some(function (item) {
-        return Boolean(item.errorMessage);
-      }),
       formHasChanges: function formHasChanges() {
@@ -434,5 +491,9 @@ return Object.values(form).some(function (field) {
         var errors = Object.values(form).map(function (field) {
+          var _field$validateOnSubm = field.validateOnSubmit(),
+              hasError = _field$validateOnSubm.hasError,
+              errorMessage = _field$validateOnSubm.errorMessage;
+
           return {
             key: field.key,
-            errorMessage: field.validateOnSubmit()
+            errorMessage: errorMessage || (hasError ? 'This field is required' : '')
           };
@@ -439,0 +500,0 @@ }).filter(function (field) {

dist/react-form-builder-v2.umd.production.min.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("ramda")):"function"==typeof define&&define.amd?define(["exports","react","ramda"],r):r((e=e||self)["@codegateinc/react-form-builder-v2"]={},e.React,e.ramda)}(this,(function(e,r,n){"use strict";function t(){return(t=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var i=function(e){return null!=e},u=function(e,r){return i(e)&&r(e)};e.useField=function(e){var u=e.key,a=e.label,o=e.initialValue,s=e.validationRules,l=e.isRequired,c=e.placeholder,f=e.validateOnBlur,v=void 0!==f&&f,d=e.liveParser,y=e.submitParser,g=r.useState(o),h=g[0],k=g[1],b=r.useState({value:h,isPristine:!0,errorMessage:""}),M=b[0],m=b[1],O=function(e,r){if(void 0===r&&(r=!1),!r&&M.isPristine||!s)return"";var t=i(e)?e:M.value;if(l&&n.isEmpty(t))return s[0].errorMessage;if(!l&&!Boolean(t))return"";var u=s.find((function(e){return!e.validate(t)}));return u?u.errorMessage:""};return{key:u,label:a,isRequired:l,placeholder:c,submitParser:y,parentKey:"",value:M.value,hasChange:M.value!==h,errorMessage:M.errorMessage,onBlur:function(){return v&&m((function(e){return t({},e,{isPristine:!1,errorMessage:O(void 0,!0)})}))},onChangeValue:function(e){return m((function(r){return t({},r,{value:d?d(e):e,isPristine:r.isPristine?v:r.isPristine,errorMessage:O(e)})}))},onChangeInitialValue:function(e){M.value===h&&m((function(r){return t({},r,{value:e})})),k(e)},validateOnSubmit:function(){var e=O(void 0,!0);return e?(m((function(r){return t({},r,{errorMessage:e})})),e):""},setError:function(e){return m((function(r){return t({},r,{errorMessage:e})}))},resetState:function(){return m((function(e){return t({},e,{isPristine:!0,errorMessage:"",value:o})}))},validate:function(){return m((function(e){return t({},e,{errorMessage:O(void 0,!0)})}))}}},e.useForm=function(e,a){var o=Object.entries(e).reduce((function(e,r){var n;return t({},e,((n={})[r[0]]=r[1],n))}),{}),s=r.useState({}),l=s[0],c=s[1],f=function(e){var r=e.some((function(e){return e.isRequired&&Boolean(e.value)}));return{hasError:e.some((function(e){return!n.isEmpty(e.errorMessage)}))||r}}(Object.values(e)).hasError,v=t({},o,Object.entries(l).reduce((function(e,r){var n=r[1],i=n.parentKey.split(".").filter(Boolean);if(i.length>0){var u=i.reduce((function(r,u,a){var o,s;return t({},e,r,((s={})[u]=t({},e[u],r[u]||{},a===i.length-1?{children:[].concat((null==(o=r[u])?void 0:o.children)||[],[n])}:{}),s))}),{}),a=Object.keys(u).filter((function(e){return Object.keys(u[e]).length})).reduce((function(e,r){var n;return t({},e,((n={})[r]=u[r],n))}),{});return t({},e,a)}return t({},e,{field:n})}),{}));return{form:v,hasError:f,isFilled:Object.values(v).filter((function(e){return e.isRequired})).every((function(e){return e.hasChange})),isEachFieldValid:!Object.values(v).filter((function(e){return e.isRequired})).some((function(e){return Boolean(e.errorMessage)})),formHasChanges:function(){return Object.values(v).some((function(e){return e.hasChange}))},setError:function(e,r){v[e].setError(r),u(a.onError,(function(n){var t;return n(((t={})[e]=r,t))}))},setFieldValue:function(e,r){v[e].onChangeValue(r)},setFieldInitialValue:function(e,r){v[e].onChangeInitialValue(r)},addFields:function(e){return c((function(r){return t({},r,e.reduce((function(e,u){return t({},e,function e(r,u,a){var o;return r.children?r.children.reduce((function(n,i){return t({},n,e(i,u,a+"."+r.key))}),{}):((o={})[r.key]=function(e,r,u,a){var o;void 0===a&&(a="");var s=function(e,r,t){if(void 0===t&&(t=!1),!t&&e.isPristine||!e.validationRules)return"";var u=i(r)?r:e.value;if(e.isRequired&&n.isEmpty(u))return e.validationRules[0].errorMessage;if(!e.isRequired&&!Boolean(u))return"";var a=e.validationRules.find((function(e){return!e.validate(u)}));return a?a.errorMessage:""};return t({},e,{value:"",hasChange:!1,isPristine:!0,parentKey:a,isRequired:e.isRequired||!1,validateOnBlur:e.validateOnBlur||!1,localInitialValue:e.initialValue||"",errorMessage:null==(o=r[e.key])?void 0:o.errorMessage,onChangeValue:function(r){return u((function(n){var i,u,a=t({},n[e.key],{value:e.liveParser?e.liveParser(r):r,hasChange:r!==(null==(i=n[e.key])?void 0:i.localInitialValue),isPristine:n[e.key].isPristine?e.validateOnBlur||!1:n[e.key].isPristine});return t({},n,((u={})[e.key]=t({},a,{errorMessage:s(a,r)}),u))}))},onBlur:function(){return e.validateOnBlur&&u((function(r){var n;return t({},r,((n={})[e.key]=t({},r[e.key],{isPristine:!1,errorMessage:s(r[e.key],void 0,!0)}),n))}))},validateOnSubmit:function(){var n=s(r[e.key],void 0,!0);return n?(u((function(r){var i;return t({},r,((i={})[e.key]=t({},r[e.key],{errorMessage:n}),i))})),n):""},onChangeInitialValue:function(n){r.value===r.localInitialValue&&u((function(r){var i;return t({},r,((i={})[e.key]=t({},r[e.key],{value:n,localInitialValue:n}),i))}))},setError:function(r){return u((function(n){var i;return t({},n,((i={})[e.key]=t({},n[e.key],{errorMessage:r}),i))}))},resetState:function(){return u((function(r){var n;return t({},r,((n={})[e.key]=t({},r[e.key],{isPristine:!0,errorMessage:"",value:e.initialValue||""}),n))}))},validate:function(){return u((function(r){var n;return t({},r,((n={})[e.key]=t({},r[e.key],{errorMessage:s(r[e.key],void 0,!0)}),n))}))}})}(r,u,c,a),o)}(u,r,""))}),{}))}))},removeFieldIds:function(e){return c((function(r){return Object.keys(r).reduce((function(n,i){var u;return e.includes(i)?n:t({},n,((u={})[i]=r[i],u))}),{})}))},resetForm:function(){return Object.keys(v).forEach((function(e){return v[e].resetState()}))},submit:function(){var e=Object.values(v).map((function(e){return{key:e.key,errorMessage:e.validateOnSubmit()}})).filter((function(e){return Boolean(e.errorMessage)})).reduce((function(e,r){var n;return t({},e,((n={})[r.key]=r.errorMessage,n))}),{});if(Object.values(e).length>0)return u(a.onError,(function(r){return r(e)}));var r=Object.values(v).reduce((function(e,r){var n,i=r.value,u=r.submitParser;return t({},e,((n={})[r.key]=u?u(i):i,n))}),{});a.onSuccess(r)},validateAll:function(){return Object.values(v).forEach((function(e){return e.validate()}))}}},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("ramda")):"function"==typeof define&&define.amd?define(["exports","react","ramda"],e):e((r=r||self)["@codegateinc/react-form-builder-v2"]={},r.React,r.ramda)}(this,(function(r,e,n){"use strict";function a(){return(a=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(r[a]=n[a])}return r}).apply(this,arguments)}var t=function(r){return null!=r},i=function(r,e){return t(r)&&e(r)};r.useField=function(r){var i=r.key,o=r.label,u=r.initialValue,s=r.validationRules,l=void 0===s?[]:s,c=r.isRequired,f=void 0!==c&&c,v=r.placeholder,d=r.validateOnBlur,h=void 0!==d&&d,g=r.liveParser,y=r.submitParser,M=e.useState(u),E=M[0],k=M[1],b=e.useState({value:E||"",isPristine:!0,errorMessage:"",hasError:!1}),O=b[0],m=b[1],P=function(r,e){if(void 0===e&&(e=!1),!e&&O.isPristine||!l)return{errorMessage:"",hasError:!1};var a,i=t(r)?r:O.value;if(f&&n.isEmpty(i))return{errorMessage:null==(a=l[0])?void 0:a.errorMessage,hasError:!0};if(!f&&!Boolean(i))return{errorMessage:"",hasError:!1};var o=l.find((function(r){return!r.validate(i)}));return{errorMessage:o?o.errorMessage:"",hasError:Boolean(null==o?void 0:o.errorMessage)}};return{key:i,label:o,isRequired:f,placeholder:v,submitParser:y,parentKey:"",hasError:O.hasError,value:O.value,hasChange:O.value!==E,errorMessage:O.errorMessage,onBlur:function(){if(h){var r=P(void 0,!0),e=r.errorMessage,n=r.hasError;m((function(r){return a({},r,{isPristine:!1,errorMessage:e,hasError:n})}))}},onChangeValue:function(r){var e=P(r,!h),n=e.hasError,t=e.errorMessage;m((function(e){return a({},e,{value:g?g(r):r,isPristine:e.isPristine?h:e.isPristine,errorMessage:t,hasError:n})}))},onChangeInitialValue:function(r){O.value===E&&m((function(e){return a({},e,{value:r})})),k(r)},validateOnSubmit:function(){var r=P(void 0,!0),e=r.hasError,n=r.errorMessage;return m((function(r){return a({},r,{errorMessage:n,hasError:e})})),{hasError:e,errorMessage:n}},setError:function(r){return m((function(e){return a({},e,{errorMessage:r})}))},resetState:function(){return m((function(r){return a({},r,{isPristine:!0,errorMessage:"",value:u||""})}))},validate:function(){var r=P(void 0,!0),e=r.hasError,n=r.errorMessage;m((function(r){return a({},r,{errorMessage:n,hasError:e})}))}}},r.useForm=function(r,o){var u=Object.entries(r).reduce((function(r,e){var n;return a({},r,((n={})[e[0]]=e[1],n))}),{}),s=e.useState({}),l=s[1],c=a({},u,Object.entries(s[0]).reduce((function(r,e){var n=e[1],t=n.parentKey.split(".").filter(Boolean);if(t.length>0){var i=t.reduce((function(e,i,o){var u,s;return a({},r,e,((s={})[i]=a({},r[i],e[i]||{},o===t.length-1?{children:[].concat((null==(u=e[i])?void 0:u.children)||[],[n])}:{}),s))}),{}),o=Object.keys(i).filter((function(r){return Object.keys(i[r]).length})).reduce((function(r,e){var n;return a({},r,((n={})[e]=i[e],n))}),{});return a({},r,o)}return a({},r,{field:n})}),{})),f=Object.values(c).filter((function(r){return r.isRequired})).some((function(r){return Boolean(r.errorMessage)}));return{form:c,hasError:f,isFilled:Object.values(c).filter((function(r){return r.isRequired})).every((function(r){return r.hasChange})),formHasChanges:function(){return Object.values(c).some((function(r){return r.hasChange}))},setError:function(r,e){c[r].setError(e),i(o.onError,(function(n){var a;return n(((a={})[r]=e,a))}))},setFieldValue:function(r,e){c[r].onChangeValue(e)},setFieldInitialValue:function(r,e){c[r].onChangeInitialValue(e)},addFields:function(r){return l((function(e){return a({},e,r.reduce((function(r,i){return a({},r,function r(e,i,o){var u;return e.children?e.children.reduce((function(n,t){return a({},n,r(t,i,o+"."+e.key))}),{}):((u={})[e.key]=function(r,e,i,o){var u;void 0===o&&(o="");var s=function(r,e,a){if(void 0===a&&(a=!1),!a&&r.isPristine||!r.validationRules)return{errorMessage:"",hasError:!1};var i,o=t(e)?e:r.value;if(r.isRequired&&n.isEmpty(o))return{errorMessage:null==(i=r.validationRules[0])?void 0:i.errorMessage,hasError:!0};if(!r.isRequired&&!Boolean(o))return{errorMessage:"",hasError:!1};var u=r.validationRules.find((function(r){return!r.validate(o)}));return{errorMessage:u?u.errorMessage:"",hasError:Boolean(null==u?void 0:u.errorMessage)}};return a({},r,{value:"",hasChange:!1,isPristine:!0,parentKey:o,hasError:e[r.key].hasError,isRequired:r.isRequired||!1,validateOnBlur:r.validateOnBlur||!1,localInitialValue:r.initialValue||"",errorMessage:null==(u=e[r.key])?void 0:u.errorMessage,onChangeValue:function(e){return i((function(n){var t,i,o=a({},n[r.key],{value:r.liveParser?r.liveParser(e):e,hasChange:e!==(null==(t=n[r.key])?void 0:t.localInitialValue),isPristine:n[r.key].isPristine?r.validateOnBlur||!1:n[r.key].isPristine}),u=s(o,e);return a({},n,((i={})[r.key]=a({},o,{errorMessage:u.errorMessage,hasError:u.hasError}),i))}))},onBlur:function(){if(r.validateOnBlur){var n=s(e[r.key],void 0,!0),t=n.errorMessage,o=n.hasError;i((function(e){var n;return a({},e,((n={})[r.key]=a({},e[r.key],{isPristine:!1,errorMessage:t,hasError:o}),n))}))}},validateOnSubmit:function(){var n=s(e[r.key],void 0,!0),t=n.errorMessage,o=n.hasError;return i((function(e){var n;return a({},e,((n={})[r.key]=a({},e[r.key],{errorMessage:t,hasError:o}),n))})),{errorMessage:t,hasError:o}},onChangeInitialValue:function(n){e.value===e.localInitialValue&&i((function(e){var t;return a({},e,((t={})[r.key]=a({},e[r.key],{value:n,localInitialValue:n}),t))}))},setError:function(e){return i((function(n){var t;return a({},n,((t={})[r.key]=a({},n[r.key],{errorMessage:e}),t))}))},resetState:function(){return i((function(e){var n;return a({},e,((n={})[r.key]=a({},e[r.key],{isPristine:!0,errorMessage:"",value:r.initialValue||""}),n))}))},validate:function(){var n=s(e[r.key],void 0,!0),t=n.hasError,o=n.errorMessage;i((function(e){var n;return a({},e,((n={})[r.key]=a({},e[r.key],{errorMessage:o,hasError:t}),n))}))}})}(e,i,l,o),u)}(i,e,""))}),{}))}))},removeFieldIds:function(r){return l((function(e){return Object.keys(e).reduce((function(n,t){var i;return r.includes(t)?n:a({},n,((i={})[t]=e[t],i))}),{})}))},resetForm:function(){return Object.keys(c).forEach((function(r){return c[r].resetState()}))},submit:function(){var r=Object.values(c).map((function(r){var e=r.validateOnSubmit();return{key:r.key,errorMessage:e.errorMessage||(e.hasError?"This field is required":"")}})).filter((function(r){return Boolean(r.errorMessage)})).reduce((function(r,e){var n;return a({},r,((n={})[e.key]=e.errorMessage,n))}),{});if(Object.values(r).length>0)return i(o.onError,(function(e){return e(r)}));var e=Object.values(c).reduce((function(r,e){var n,t=e.value,i=e.submitParser;return a({},r,((n={})[e.key]=i?i(t):t,n))}),{});o.onSuccess(e)},validateAll:function(){return Object.values(c).forEach((function(r){return r.validate()}))}}},Object.defineProperty(r,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-form-builder-v2.umd.production.min.js.map

index.d.ts

@@ -19,2 +19,4 @@ type VoidFunction = () => void
     validate: VoidFunction,
+    children?: Array<Field<T>>,
+    hasError: boolean,
     validateOnSubmit(): string,
@@ -42,3 +44,2 @@ onChangeValue(newValue: T): void,
     isFilled: boolean,
-    isEachFieldValid: boolean,
     resetForm: VoidFunction,
@@ -70,3 +71,4 @@ submit: VoidFunction,
     useField,
-    Field
+    Field,
+    UseFormReturn
 }

package.json

@@ -6,3 +6,3 @@ {
     "typings": "index.d.ts",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "main": "dist/index.js",
@@ -15,5 +15,7 @@ "scripts": {
     },
+    "dependencies": {
+        "ramda": "0.28.0"
+    },
     "peerDependencies": {
-        "react": "18.x.x",
-        "ramda": "^0.28.0"
+        "react": "18.x.x"
     },
@@ -20,0 +22,0 @@ "devDependencies": {

src/main/generateField.ts

@@ -14,3 +14,6 @@ import React from 'react'
         if ((!forceCheck && field.isPristine) || !field.validationRules) {
-            return ''
+            return {
+                errorMessage: '',
+                hasError: false
+            }
         }
@@ -23,7 +26,13 @@
         if (field.isRequired && isEmpty(val)) {
-            return field.validationRules[0].errorMessage
+            return {
+                errorMessage: field.validationRules[0]?.errorMessage,
+                hasError: true
+            }
         }
 
         if (!field.isRequired && !Boolean(val)) {
-            return ''
+            return {
+                errorMessage: '',
+                hasError: false
+            }
         }
@@ -34,5 +43,8 @@
 
-        return firstError
-            ? firstError.errorMessage
-            : ''
+        return {
+            errorMessage: firstError
+                ? firstError.errorMessage
+                : '',
+            hasError: Boolean(firstError?.errorMessage)
+        }
     }
@@ -46,2 +58,3 @@
         parentKey,
+        hasError: prevState[fieldConfig.key].hasError,
         isRequired: fieldConfig.isRequired || false,
@@ -63,2 +76,4 @@ validateOnBlur: fieldConfig.validateOnBlur || false,
 
+            const { errorMessage, hasError } = computeErrorMessage(changedField, value)
+
             return {
@@ -68,18 +83,11 @@ ...prevState,
                     ...changedField,
-                    errorMessage: computeErrorMessage(changedField, value)
+                    errorMessage,
+                    hasError
                 }
             }
         }),
-        onBlur: () => fieldConfig.validateOnBlur && setState(prevState => ({
-            ...prevState,
-            [fieldConfig.key]: {
-                ...prevState[fieldConfig.key],
-                isPristine: false,
-                errorMessage: computeErrorMessage(prevState[fieldConfig.key], undefined, true)
-            }
-        })),
-        validateOnSubmit: () => {
-            const errorMessage = computeErrorMessage(prevState[fieldConfig.key], undefined, true)
+        onBlur: () => {
+            if (fieldConfig.validateOnBlur) {
+                const { errorMessage, hasError } = computeErrorMessage(prevState[fieldConfig.key], undefined, true)
 
-            if (errorMessage) {
                 setState(prevState => ({
@@ -89,10 +97,25 @@ ...prevState,
                         ...prevState[fieldConfig.key],
-                        errorMessage
+                        isPristine: false,
+                        errorMessage,
+                        hasError
                     }
                 }))
+            }
+        },
+        validateOnSubmit: () => {
+            const { errorMessage, hasError } = computeErrorMessage(prevState[fieldConfig.key], undefined, true)
 
-                return errorMessage
+            setState(prevState => ({
+                ...prevState,
+                [fieldConfig.key]: {
+                    ...prevState[fieldConfig.key],
+                    errorMessage,
+                    hasError
+                }
+            }))
+
+            return {
+                errorMessage,
+                hasError
             }
-
-            return ''
         },
@@ -127,10 +150,15 @@ onChangeInitialValue: (value: T) => {
         })),
-        validate: () => setState(prevState => ({
-            ...prevState,
-            [fieldConfig.key]: {
-                ...prevState[fieldConfig.key],
-                errorMessage: computeErrorMessage(prevState[fieldConfig.key], undefined, true)
-            }
-        }))
+        validate: () => {
+            const { hasError, errorMessage } = computeErrorMessage(prevState[fieldConfig.key], undefined, true)
+
+            setState(prevState => ({
+                ...prevState,
+                [fieldConfig.key]: {
+                    ...prevState[fieldConfig.key],
+                    errorMessage,
+                    hasError
+                }
+            }))
+        }
     } as ExtendedConfig<T>
 }

src/main/types.ts

@@ -9,5 +9,6 @@ import { VoidFunction } from 'lib/types'
 export type GateFieldState<T> = {
-    value: T,
+    value: T | string,
     isPristine: boolean,
-    errorMessage: string
+    errorMessage: string,
+    hasError: boolean
 }
@@ -18,8 +19,8 @@
     label?: string,
-    initialValue: T,
-    isRequired: boolean,
+    initialValue?: T,
+    isRequired?: boolean,
     placeholder?: string,
     validateOnBlur?: boolean,
     validationRules?: Array<ValidationRule<T>>,
-    children: Array<FieldConfig<T>>,
+    children?: Array<FieldConfig<T>>,
     liveParser?(value: T): T,
@@ -35,2 +36,7 @@ submitParser?(value: T): T
 
+type ValidateOnSubmitProps = {
+    hasError: boolean,
+    errorMessage: string
+}
+
 export type GateField<T> = {
@@ -47,3 +53,4 @@ value: T | string,
     parentKey: string,
-    validateOnSubmit(): string,
+    hasError: boolean,
+    validateOnSubmit(): ValidateOnSubmitProps,
     onChangeValue(newValue: T): void,
@@ -50,0 +57,0 @@ submitParser?(value: T): T,

src/main/useField.ts

@@ -10,4 +10,4 @@ import { useState } from 'react'
     initialValue,
-    validationRules,
-    isRequired,
+    validationRules = [],
+    isRequired = false,
     placeholder,
@@ -20,5 +20,6 @@ validateOnBlur = false,
     const [field, setField] = useState<GateFieldState<T>>({
-        value: localInitialValue,
+        value: localInitialValue || '',
         isPristine: true,
-        errorMessage: ''
+        errorMessage: '',
+        hasError: false
     })
@@ -28,3 +29,6 @@
         if ((!forceCheck && field.isPristine) || !validationRules) {
-            return ''
+            return {
+                errorMessage: '',
+                hasError: false
+            }
         }
@@ -37,7 +41,13 @@
         if (isRequired && isEmpty(val)) {
-            return validationRules[0].errorMessage
+            return {
+                errorMessage: validationRules[0]?.errorMessage,
+                hasError: true
+            }
         }
 
         if (!isRequired && !Boolean(val)) {
-            return ''
+            return {
+                errorMessage: '',
+                hasError: false
+            }
         }
@@ -48,5 +58,8 @@
 
-        return firstError
-            ? firstError.errorMessage
-            : ''
+        return {
+            errorMessage: firstError
+                ? firstError.errorMessage
+                : '',
+            hasError: Boolean(firstError?.errorMessage)
+        }
     }
@@ -61,20 +74,33 @@
         parentKey: '',
+        hasError: field.hasError,
         value: field.value,
         hasChange: field.value !== localInitialValue,
         errorMessage: field.errorMessage,
-        onBlur: () => validateOnBlur && setField(prevState => ({
-            ...prevState,
-            isPristine: false,
-            errorMessage: computeErrorMessage(undefined, true)
-        })),
-        onChangeValue: (newValue: T) => setField(prevState => ({
-            ...prevState,
-            value: liveParser
-                ? liveParser(newValue)
-                : newValue,
-            isPristine: prevState.isPristine
-                ? validateOnBlur
-                : prevState.isPristine,
-            errorMessage: computeErrorMessage(newValue)
-        })),
+        onBlur: () => {
+            if (validateOnBlur) {
+                const { errorMessage, hasError } = computeErrorMessage(undefined, true)
+
+                setField(prevState => ({
+                    ...prevState,
+                    isPristine: false,
+                    errorMessage,
+                    hasError
+                }))
+            }
+        },
+        onChangeValue: (newValue: T) => {
+            const { hasError, errorMessage } = computeErrorMessage(newValue, !validateOnBlur)
+
+            setField(prevState => ({
+                ...prevState,
+                value: liveParser
+                    ? liveParser(newValue)
+                    : newValue,
+                isPristine: prevState.isPristine
+                    ? validateOnBlur
+                    : prevState.isPristine,
+                errorMessage,
+                hasError
+            }))
+        },
         onChangeInitialValue: (value: T) => {
@@ -91,14 +117,14 @@ if (field.value === localInitialValue) {
         validateOnSubmit: () => {
-            const errorMessage = computeErrorMessage(undefined, true)
+            const { hasError, errorMessage } = computeErrorMessage(undefined, true)
 
-            if (errorMessage) {
-                setField(prevState => ({
-                    ...prevState,
-                    errorMessage
-                }))
+            setField(prevState => ({
+                ...prevState,
+                errorMessage,
+                hasError
+            }))
 
-                return errorMessage
+            return {
+                hasError,
+                errorMessage
             }
-
-            return ''
         },
@@ -113,9 +139,14 @@ setError: (errorMessage: string) => setField(prevState => ({
             errorMessage: '',
-            value: initialValue
+            value: initialValue || ''
         })),
-        validate: () => setField(prevState => ({
-            ...prevState,
-            errorMessage: computeErrorMessage(undefined, true)
-        }))
+        validate: () => {
+            const { hasError, errorMessage } = computeErrorMessage(undefined, true)
+
+            setField(prevState => ({
+                ...prevState,
+                errorMessage,
+                hasError
+            }))
+        }
     }
 }

src/main/useForm.ts

 import { useState } from 'react'
 import { R } from 'lib/utils'
 import { generateField } from './generateField'
-import { useFormValidator } from './useValidator'
 import { FieldConfig, GateField, InnerForm } from './types'
@@ -23,4 +22,2 @@
     const [innerForm, setInnerForm] = useState<InnerForm<T>>({} as InnerForm<T>)
-
-    const { hasError } = useFormValidator(Object.values(formFields))
     const form = {
@@ -72,2 +69,7 @@ ...injectedForm,
 
+    const hasError = Object
+        .values<GateField<any>>(form)
+        .filter(item => item.isRequired)
+        .some(item => Boolean(item.errorMessage))
+
     const addFieldsRecurrence = (field: FieldConfig<any>, prevState: any, parentKey: string): any => {
@@ -93,6 +95,2 @@ if (field.children) {
             .every(item => item.hasChange),
-        isEachFieldValid: !Object
-            .values<GateField<any>>(form)
-            .filter(item => item.isRequired)
-            .some(item => Boolean(item.errorMessage)),
         formHasChanges: () => Object
@@ -140,6 +138,10 @@ .values<GateField<any>>(form)
                 .values<GateField<any>>(form)
-                .map(field => ({
-                    key: field.key,
-                    errorMessage: field.validateOnSubmit()
-                }))
+                .map(field => {
+                    const { hasError, errorMessage } = field.validateOnSubmit()
+
+                    return {
+                        key: field.key,
+                        errorMessage: errorMessage || (hasError ? 'This field is required' : '')
+                    }
+                })
                 .filter(field => Boolean(field.errorMessage))
@@ -146,0 +148,0 @@ .reduce((acc, { key, errorMessage}) => ({

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

233278

increased by14.61%

Lines of code

2013

increased by12.4%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

150

increased byInfinity%

Dependency changes

• + Addedramda@0.28.0