@formio/js 5.0.0-bb.dev.2 → 5.0.0-bb.dev.4

package/lib/cjs/components/_classes/component/Component.js

@@ -1846,6 +1846,10 @@ class Component extends Element_1.default {
             this.setElementInvalid(this.performInputMapping(element), false);
         });
         this.setInputWidgetErrorClasses(elements, hasErrors);
+        // do not set error classes for hidden components
+        if (!this.visible) {
+            return;
+        }
         if (hasErrors) {
             // Add error classes
             elements.forEach((input) => {
@@ -2459,8 +2463,8 @@ class Component extends Element_1.default {
     }
     /* eslint-disable max-statements */
     calculateComponentValue(data, flags, row) {
-        // Skip value calculation for the component if we don't have entire form data set
-        if (lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {
+        // Skip value calculation for the component if we don't have entire form data set or in builder mode
+        if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {
             return false;
         }
         // If no calculated value or
@@ -2518,6 +2522,7 @@ class Component extends Element_1.default {
             }
             // Check to ensure that the calculated value is different than the previously calculated value.
             if (previousCalculatedValue && previousChanged && !calculationChanged) {
+                this.calculatedValue = null;
                 return false;
             }
             if (flags.isReordered || !calculationChanged) {
@@ -2876,6 +2881,7 @@ class Component extends Element_1.default {
         return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));
     }
     shouldSkipValidation(data, dirty, row) {
+        const { validateWhenHidden = false } = this.component || {};
         const rules = [
             // Force valid if component is read-only
             () => this.options.readOnly,
@@ -2884,9 +2890,9 @@ class Component extends Element_1.default {
             // Check to see if we are editing and if so, check component persistence.
             () => this.isValueHidden(),
             // Force valid if component is hidden.
-            () => !this.visible,
+            () => !this.visible && !validateWhenHidden,
             // Force valid if component is conditionally hidden.
-            () => !this.checkCondition(row, data)
+            () => !this.checkCondition(row, data) && !validateWhenHidden
         ];
         return rules.some(pred => pred());
     }

package/lib/cjs/components/_classes/component/editForm/Component.edit.validation.js

@@ -23,6 +23,14 @@ exports.default = [
         key: 'unique',
         input: true
     },
+    {
+        weight: 100,
+        type: 'checkbox',
+        label: 'Validate When Hidden',
+        tooltip: 'Validates the component when it is hidden/conditionally hidden. Vaildation errors are displayed in the error alert on the form submission.',
+        key: 'validateWhenHidden',
+        input: true
+    },
     {
         weight: 0,
         type: 'select',

package/lib/cjs/components/_classes/component/editForm/utils.d.ts

@@ -1,7 +1,7 @@
 export default EditFormUtils;
 declare namespace EditFormUtils {
-    function sortAndFilterComponents(components: any): any;
-    function unifyComponents(objValue: any, srcValue: any): any;
+    function sortAndFilterComponents(components: any): any[];
+    function unifyComponents(objValue: any, srcValue: any): boolean;
     function logicVariablesTable(additional: any): {
         type: string;
         tag: string;

package/lib/cjs/components/_classes/input/Input.d.ts

@@ -1,6 +1,6 @@
 export default class Input extends Multivalue {
     constructor(component: any, options: any, data: any);
-    triggerUpdateValueAt: any;
+    triggerUpdateValueAt: _.DebouncedFunc<(value: any, flags: any, index: any) => void>;
     get inputInfo(): {
         id: any;
         type: string;
@@ -14,7 +14,10 @@ export default class Input extends Multivalue {
         };
     };
     get autocompleteDisableAttrName(): string;
-    get maskOptions(): any;
+    get maskOptions(): {
+        label: any;
+        value: any;
+    }[];
     get isMultipleMasksField(): any;
     getMaskByName(maskName: any): any;
     setInputMask(input: any, inputMask: any): void;
@@ -40,3 +43,4 @@ export default class Input extends Multivalue {
     createWidget(index: any): null;
 }
 import Multivalue from '../multivalue/Multivalue';
+import _ from 'lodash';