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

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

@@ -1811,6 +1811,10 @@ export default class Component extends Element {
             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) => {
@@ -2428,8 +2432,8 @@ export default class Component extends Element {
     }
     /* eslint-disable max-statements */
     calculateComponentValue(data, flags, row) {
-        // Skip value calculation for the component if we don't have entire form data set
-        if (_.isUndefined(_.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 || _.isUndefined(_.get(this, 'root.data'))) {
             return false;
         }
         // If no calculated value or
@@ -2487,6 +2491,7 @@ export default class Component extends Element {
             }
             // 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) {
@@ -2842,6 +2847,7 @@ export default class Component extends Element {
         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,
@@ -2850,9 +2856,9 @@ export default class Component extends Element {
             // 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/mjs/components/_classes/component/editForm/Component.edit.validation.js

@@ -18,6 +18,14 @@ export 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/mjs/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/mjs/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';