@formio/js 5.0.0-dev.5646.8734cf4 → 5.0.0-dev.5650.cd53187

package/lib/cjs/WebformBuilder.d.ts

@@ -22,7 +22,6 @@ export default class WebformBuilder extends Component {
     createForm(options: any): any;
     /**
      * Called when everything is ready.
-     *
      * @returns {Promise} - Wait for webform to be ready.
      */
     get ready(): Promise<any>;
@@ -52,13 +51,15 @@ export default class WebformBuilder extends Component {
     redraw(): Promise<void> | Promise<boolean>;
     set form(value: any);
     get form(): any;
+    get schema(): any;
     get container(): any;
     /**
      * When a component sets its api key, we need to check if it is unique within its namespace. Find the namespace root
      * so we can calculate this correctly.
-     * @param component
+     * @param {import('@formio/core').Component} component - The component to find the namespace root for.
+     * @returns {import('@formio/core').Component[]} - The components root for this namespace.
      */
-    findNamespaceRoot(component: any): any;
+    findNamespaceRoot(component: import('@formio/core').Component): import('@formio/core').Component[];
     recurseNamespace(component: any): any;
     render(): any;
     attach(element: any): Promise<any>;
@@ -80,12 +81,13 @@ export default class WebformBuilder extends Component {
     highlightInvalidComponents(): void;
     /**
      * Called when a new component is saved.
-     *
-     * @param parent
-     * @param component
-     * @return {boolean}
+     * @param {Component} component - The component instance to save.
+     * @param {Component} parent - The parent component.
+     * @param {boolean} isNew - If this is a new component.
+     * @param {Component} original - The original component.
+     * @returns {boolean} - If the component was saved.
      */
-    saveComponent(component: any, parent: any, isNew: any, original: any): boolean;
+    saveComponent(component: Component, parent: Component, isNew: boolean, original: Component): boolean;
     isComponentCreated: boolean | undefined;
     emitSaveComponentEvent(schema: any, originalComp: any, parentComponentSchema: any, path: any, index: any, isNew: any, originalComponentSchema: any): void;
     attachEditComponentControls(component: any, parent: any, isNew: any, original: any, ComponentClass: any): void;
@@ -105,16 +107,16 @@ export default class WebformBuilder extends Component {
     addNewComponent(element: any): void;
     /**
      * Creates copy of component schema and stores it under sessionStorage.
-     * @param {Component} component
-     * @return {*}
+     * @param {Component} component - The component to copy.
+     * @returns {void}
      */
-    copyComponent(component: Component): any;
+    copyComponent(component: Component): void;
     /**
      * Paste copied component after the current component.
-     * @param {Component} component
-     * @return {*}
+     * @param {Component} component - The component to paste after.
+     * @returns {void}
      */
-    pasteComponent(component: Component): any;
+    pasteComponent(component: Component): void;
     isParentSaveChildMethod(parentComp: any): boolean;
     getParentElement(element: any): any;
     addBuilderComponentInfo(component: any): any;

package/lib/cjs/WebformBuilder.js

@@ -208,7 +208,8 @@ class WebformBuilder extends Component_1.default {
             params: {
                 type: 'resource',
                 limit: 1000000,
-                select: '_id,title,name,components'
+                select: '_id,title,name,components',
+                'tags__ne': 'noBuilderResource'
             }
         };
         if (this.options && this.options.resourceTag) {
@@ -380,7 +381,6 @@ class WebformBuilder extends Component_1.default {
     }
     /**
      * Called when everything is ready.
-     *
      * @returns {Promise} - Wait for webform to be ready.
      */
     get ready() {
@@ -429,7 +429,8 @@ class WebformBuilder extends Component_1.default {
     /**
      * When a component sets its api key, we need to check if it is unique within its namespace. Find the namespace root
      * so we can calculate this correctly.
-     * @param component
+     * @param {import('@formio/core').Component} component - The component to find the namespace root for.
+     * @returns {import('@formio/core').Component[]} - The components root for this namespace.
      */
     findNamespaceRoot(component) {
         const path = (0, utils_1.getArrayFromComponentPath)(component.path);
@@ -908,9 +909,16 @@ class WebformBuilder extends Component_1.default {
         if (form && form.properties) {
             this.options.properties = form.properties;
         }
-        this.keyboardActionsEnabled = lodash_1.default.get(this.options, 'keyboardBuilder', false) || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.keyboardBuilder);
+        let keyboardActionsEnabled = lodash_1.default.get(this.options, 'keyboardBuilder', false) || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.keyboardBuilder);
+        if (typeof keyboardActionsEnabled === 'string') {
+            keyboardActionsEnabled = keyboardActionsEnabled === 'true';
+        }
+        this.keyboardActionsEnabled = keyboardActionsEnabled;
+        const isSubmitButton = (comp) => {
+            return (comp.type === 'button') && ((comp.action === 'submit') || !comp.action);
+        };
         const isShowSubmitButton = !this.options.noDefaultSubmitButton
-            && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));
+            && (!form.components.length || !form.components.find(comp => isSubmitButton(comp)));
         // Ensure there is at least a submit button.
         if (isShowSubmitButton) {
             form.components.push({
@@ -1060,7 +1068,10 @@ class WebformBuilder extends Component_1.default {
                     'calculateValue',
                     'conditional',
                     'customConditional',
-                    'id'
+                    'id',
+                    'fields.day.required',
+                    'fields.month.required',
+                    'fields.year.required',
                 ]));
                 const parentComponent = defaultValueComponent.parent;
                 let tabIndex = -1;
@@ -1135,10 +1146,11 @@ class WebformBuilder extends Component_1.default {
     }
     /**
      * Called when a new component is saved.
-     *
-     * @param parent
-     * @param component
-     * @return {boolean}
+     * @param {Component} component - The component instance to save.
+     * @param {Component} parent - The parent component.
+     * @param {boolean} isNew - If this is a new component.
+     * @param {Component} original - The original component.
+     * @returns {boolean} - If the component was saved.
      */
     saveComponent(component, parent, isNew, original) {
         this.editForm.detach();
@@ -1235,6 +1247,7 @@ class WebformBuilder extends Component_1.default {
         const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="previewButton"]`);
         previewButtons.forEach((previewButton) => {
             this.editForm.addEventListener(previewButton, 'click', (event) => {
+                var _a;
                 event.preventDefault();
                 this.showPreview = !this.showPreview;
                 this.editForm.detach();
@@ -1246,6 +1259,7 @@ class WebformBuilder extends Component_1.default {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
+                this.updateComponent((_a = this.editForm.submission.data) !== null && _a !== void 0 ? _a : component);
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });
@@ -1505,8 +1519,8 @@ class WebformBuilder extends Component_1.default {
     }
     /**
      * Creates copy of component schema and stores it under sessionStorage.
-     * @param {Component} component
-     * @return {*}
+     * @param {Component} component - The component to copy.
+     * @returns {void}
      */
     copyComponent(component) {
         if (!window.sessionStorage) {
@@ -1517,8 +1531,8 @@ class WebformBuilder extends Component_1.default {
     }
     /**
      * Paste copied component after the current component.
-     * @param {Component} component
-     * @return {*}
+     * @param {Component} component - The component to paste after.
+     * @returns {void}
      */
     pasteComponent(component) {
         if (!window.sessionStorage) {

package/lib/cjs/Wizard.d.ts

@@ -1,13 +1,4 @@
 declare class Wizard extends Webform {
-    /**
-     * Constructor for wizard based forms
-     * @param element Dom element to place this wizard.
-     * @param {Object} options Options object, supported options are:
-     *    - breadcrumbSettings.clickable: true (default) determines if the breadcrumb bar is clickable or not
-     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) determines if the button is shown or not
-     *    - allowPrevious: false (default) determines if the breadcrumb bar is clickable or not for visited tabs
-     */
-    constructor(...args: any[]);
     pages: any[];
     prefixComps: any[];
     suffixComps: any[];
@@ -28,11 +19,9 @@ declare class Wizard extends Webform {
     getPages(args?: {}): any[];
     get hasExtraPages(): boolean;
     get localData(): any;
-    isClickableDefined: any;
-    isSecondInit: boolean | undefined;
     get wizardKey(): string;
-    set wizard(form: Object);
-    get wizard(): Object;
+    set wizard(form: object);
+    get wizard(): object;
     get buttons(): {};
     get buttonOrder(): any;
     get renderContext(): {
@@ -47,16 +36,37 @@ declare class Wizard extends Webform {
     };
     prepareNavigationSettings(ctx: any): any;
     prepareHeaderSettings(ctx: any, headerType: any): any;
+    render(): any;
     redrawNavigation(): void;
     redrawHeader(): void;
-    attach(element: any): Promise<void>;
+    /**
+     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,
+     * and emits a render event. It will initialize the wizard's index if necessary,
+     * attach event hooks, and make sure that the current page is rendered and displayed correctly.
+     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.
+     * @returns {Promise} A promise that resolves when all components have been successfully attached.
+     */
+    attach(element: HTMLElement): Promise<any>;
     scrollPageToTop(): void;
     isBreadcrumbClickable(): any;
     isAllowPrevious(): any;
-    handleNaviageteOnEnter(event: any): void;
-    handleSaveOnEnter(event: any): void;
+    /**
+     * Handles navigate on 'Enter' key event in a wizard form.
+     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.
+     */
+    handleNaviageteOnEnter(event: KeyboardEvent): void;
+    /**
+     * Handles save on 'Enter' key event in a wizard form.
+     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.
+     */
+    handleSaveOnEnter(event: KeyboardEvent): void;
     attachNav(): void;
-    emitWizardPageSelected(index: any): void;
+    /**
+     * Emits an event indicating that a wizard page has been selected.
+     * @param {number} index - Index of the selected wizard page in the `pages` array.
+     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.
+     */
+    emitWizardPageSelected(index: number): void;
     attachHeader(): void;
     detachNav(): void;
     detachHeader(): void;
@@ -67,7 +77,7 @@ declare class Wizard extends Webform {
     }): any[];
     findRootPanel(component: any): any;
     setRootPanelId(component: any): void;
-    establishPages(data?: any): any[];
+    establishPages(data?: object): any[];
     updatePages(): void;
     addComponents(): void;
     setPage(num: any): Promise<void>;
@@ -84,9 +94,9 @@ declare class Wizard extends Webform {
     prevPage(): Promise<void>;
     cancel(noconfirm: any): Promise<void> | Promise<number>;
     getPageIndexByKey(key: any): number;
-    get schema(): Object;
+    get schema(): object;
     setComponentSchema(): void;
-    setForm(form: any, flags: any): any;
+    setForm(form: any, flags?: {}): Promise<any> | undefined;
     onSetForm(clonedForm: any, initialForm: any): void;
     setEditMode(submission: any): void;
     setValue(submission: any, flags: {} | undefined, ignoreEstablishment: any): any;
@@ -95,7 +105,8 @@ declare class Wizard extends Webform {
     pageId(page: any): any;
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
-    focusOnComponent(key: any): any;
+    showErrors(errors: any, triggerEvent: any): void | any[];
+    focusOnComponent(key: any): void | Promise<void>;
 }
 declare namespace Wizard {
     let setBaseUrl: any;

package/lib/cjs/Wizard.js

@@ -9,21 +9,21 @@ const Formio_1 = require("./Formio");
 const utils_1 = require("./utils/utils");
 class Wizard extends Webform_1.default {
     /**
-     * Constructor for wizard based forms
-     * @param element Dom element to place this wizard.
-     * @param {Object} options Options object, supported options are:
-     *    - breadcrumbSettings.clickable: true (default) determines if the breadcrumb bar is clickable or not
-     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) determines if the button is shown or not
-     *    - allowPrevious: false (default) determines if the breadcrumb bar is clickable or not for visited tabs
+     * Constructor for wizard-based forms.
+     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
+     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.
+     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.
+     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.
+     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.
      */
-    constructor() {
+    constructor(elementOrOptions = undefined, _options = undefined) {
         let element, options;
-        if (arguments[0] instanceof HTMLElement || arguments[1]) {
-            element = arguments[0];
-            options = arguments[1] || {};
+        if (elementOrOptions instanceof HTMLElement || _options) {
+            element = elementOrOptions;
+            options = _options || {};
         }
         else {
-            options = arguments[0] || {};
+            options = elementOrOptions || {};
         }
         options.display = 'wizard';
         super(element, options);
@@ -89,7 +89,7 @@ class Wizard extends Webform_1.default {
         this.setPristine(true);
     }
     init() {
-        var _a, _b, _c;
+        var _a;
         // Check for and initlize button settings object
         this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {
             showPrevious: true,
@@ -97,10 +97,6 @@ class Wizard extends Webform_1.default {
             showSubmit: true,
             showCancel: !this.options.readOnly
         });
-        if (!this.isSecondInit) {
-            this.isClickableDefined = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.breadcrumbSettings) === null || _b === void 0 ? void 0 : _b.hasOwnProperty('clickable');
-            this.isSecondInit = true;
-        }
         this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {
             clickable: true
         });
@@ -108,7 +104,7 @@ class Wizard extends Webform_1.default {
         this.page = 0;
         const onReady = super.init();
         this.setComponentSchema();
-        if ((_c = this.pages) === null || _c === void 0 ? void 0 : _c[this.page]) {
+        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {
             this.component = this.pages[this.page].component;
         }
         this.on('subWizardsUpdated', (subForm) => {
@@ -244,6 +240,13 @@ class Wizard extends Webform_1.default {
             }
         }
     }
+    /**
+     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,
+     * and emits a render event. It will initialize the wizard's index if necessary,
+     * attach event hooks, and make sure that the current page is rendered and displayed correctly.
+     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.
+     * @returns {Promise} A promise that resolves when all components have been successfully attached.
+     */
     attach(element) {
         var _a;
         this.setElement(element);
@@ -295,7 +298,13 @@ class Wizard extends Webform_1.default {
                 currentPage = page;
             }
         });
-        return this.isClickableDefined ? this.options.breadcrumbSettings.clickable : lodash_1.default.get(currentPage, 'component.breadcrumbClickable', true);
+        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {
+            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');
+        }
+        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {
+            return this.options.breadcrumbSettings.clickable;
+        }
+        return true;
     }
     isAllowPrevious() {
         let currentPage = null;
@@ -306,6 +315,10 @@ class Wizard extends Webform_1.default {
         });
         return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);
     }
+    /**
+     * Handles navigate on 'Enter' key event in a wizard form.
+     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.
+     */
     handleNaviageteOnEnter(event) {
         if (event.keyCode === 13) {
             const clickEvent = new CustomEvent('click');
@@ -315,6 +328,10 @@ class Wizard extends Webform_1.default {
             }
         }
     }
+    /**
+     * Handles save on 'Enter' key event in a wizard form.
+     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.
+     */
     handleSaveOnEnter(event) {
         if (event.keyCode === 13) {
             const clickEvent = new CustomEvent('click');
@@ -349,6 +366,11 @@ class Wizard extends Webform_1.default {
             });
         });
     }
+    /**
+     * Emits an event indicating that a wizard page has been selected.
+     * @param {number} index - Index of the selected wizard page in the `pages` array.
+     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.
+     */
     emitWizardPageSelected(index) {
         this.emit('wizardPageSelected', this.pages[index], index);
     }
@@ -693,7 +715,7 @@ class Wizard extends Webform_1.default {
         }
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
-            this.scrollIntoView(this.element);
+            this.scrollIntoView(this.element, true);
             return Promise.reject(this.showErrors(errors, true));
         }
     }
@@ -753,7 +775,8 @@ class Wizard extends Webform_1.default {
                     this.options.show = this.options.show || {};
                     this.options.show[item.key] = true;
                 }
-                else if (this.wizard.hasOwnProperty('full') && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {
+                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')
+                    && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {
                     this.options.show = Object.assign({}, (this.originalOptions.show || {}));
                 }
             }
@@ -771,7 +794,7 @@ class Wizard extends Webform_1.default {
             this.originalComponents.push(lodash_1.default.clone(newPage));
         }
     }
-    setForm(form, flags) {
+    setForm(form, flags = {}) {
         if (!form) {
             return;
         }
@@ -901,6 +924,17 @@ class Wizard extends Webform_1.default {
         }
         return super.errors;
     }
+    showErrors(errors, triggerEvent) {
+        if (this.hasExtraPages) {
+            this.subWizards.forEach((subWizard) => {
+                if (Array.isArray(subWizard.errors)) {
+                    errors = [...errors, ...subWizard.errors];
+                }
+            });
+        }
+        ;
+        return super.showErrors(errors, triggerEvent);
+    }
     focusOnComponent(key) {
         const component = this.getComponent(key);
         if (component) {
@@ -908,7 +942,7 @@ class Wizard extends Webform_1.default {
             while (!(topPanel.parent instanceof Wizard)) {
                 topPanel = topPanel.parent;
             }
-            const pageIndex = this.pages.findIndex(page => page === topPanel);
+            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);
             if (pageIndex >= 0) {
                 const page = this.pages[pageIndex];
                 if (page && page !== this.currentPage) {

package/lib/cjs/WizardBuilder.d.ts

@@ -45,6 +45,6 @@ export default class WizardBuilder extends WebformBuilder {
         key: string;
         components: any[];
     };
-    pasteComponent(component: any): any;
+    pasteComponent(component: any): void;
 }
 import WebformBuilder from './WebformBuilder';

package/lib/cjs/addons/PasswordStrength/PasswordStrengthAddon.d.ts

@@ -680,24 +680,26 @@ export default class PasswordStrengthAddon extends FormioAddon {
     };
     /**
      * Determines is a password is secure enough to submit
-     * @return {boolean}
+     * @returns {boolean} - returns TRUE if password is valid, FALSE if it is not.
      */
     isValid(): boolean;
     /**
      * Handles the result of check and constructs a new error object or returns an amount of points to add to the current entropy
      * @param {boolean|number} valid - Determines if the validation was failed or an amount of points if it was passed
      * @param {*} validation - Validation configuration
-     * @param {string} value - Value which was validated
      * @param {string} message - Message which should be shown if validation was not passed
+     * @param {any[]} errors - The errors array (will be mutated)
+     * @returns {number} - Returns an amount of points to add to the current entropy
      */
-    handleRuleCheckResult(valid: boolean | number, validation: any, message: string, errors: any): any;
+    handleRuleCheckResult(valid: boolean | number, validation: any, message: string, errors: any[]): number;
     performChecks(value: any): {
         charactersPoolSize: number;
         errors: any[];
     };
     /**
      * Performs checks to validate password security
-     * @param {string} value - Suggested password
+     * @param {string} value - The password value to be checked.
+     * @returns {boolean} - Returns TRUE if password is strong enough, FALSE if it is not.
      */
     checkValidity(value: string): boolean;
     handleBlackListCheckResult(result: any, errors: any): void;
@@ -708,8 +710,9 @@ export default class PasswordStrengthAddon extends FormioAddon {
     /**
      * Finds the level which one the passed entropy suits
      * @param {number} entropy - Points of password's security
+     * @returns {object} - Returns the level object
      */
-    getLevel(entropy?: number): any;
+    getLevel(entropy?: number): object;
     /**
      * Update the current view of the password's security indicator
      */

package/lib/cjs/addons/PasswordStrength/PasswordStrengthAddon.js

@@ -204,7 +204,7 @@ class PasswordStrengthAddon extends FormioAddon_1.default {
     }
     /**
      * Determines is a password is secure enough to submit
-     * @return {boolean}
+     * @returns {boolean} - returns TRUE if password is valid, FALSE if it is not.
      */
     isValid() {
         const isValidCheck = this.settings.isValid;
@@ -221,8 +221,9 @@ class PasswordStrengthAddon extends FormioAddon_1.default {
      * Handles the result of check and constructs a new error object or returns an amount of points to add to the current entropy
      * @param {boolean|number} valid - Determines if the validation was failed or an amount of points if it was passed
      * @param {*} validation - Validation configuration
-     * @param {string} value - Value which was validated
      * @param {string} message - Message which should be shown if validation was not passed
+     * @param {any[]} errors - The errors array (will be mutated)
+     * @returns {number} - Returns an amount of points to add to the current entropy
      */
     handleRuleCheckResult(valid, validation, message, errors) {
         if (valid !== true) {
@@ -262,7 +263,8 @@ class PasswordStrengthAddon extends FormioAddon_1.default {
     }
     /**
      * Performs checks to validate password security
-     * @param {string} value - Suggested password
+     * @param {string} value - The password value to be checked.
+     * @returns {boolean} - Returns TRUE if password is strong enough, FALSE if it is not.
      */
     checkValidity(value) {
         var _a;
@@ -362,6 +364,7 @@ class PasswordStrengthAddon extends FormioAddon_1.default {
     /**
      * Finds the level which one the passed entropy suits
      * @param {number} entropy - Points of password's security
+     * @returns {object} - Returns the level object
      */
     getLevel(entropy = this.entropy) {
         const lowestLevel = this.levels[0];

package/lib/cjs/components/Components.d.ts

@@ -258,11 +258,11 @@ export default class Components {
     static setComponent(name: any, comp: any): void;
     /**
      * Return a path of component's value.
-     *
-     * @param {Object} component - The component instance.
-     * @return {string} - The component's value path.
+     * @param {Component} component - The component instance.
+     * @returns {string} - The component's value path.
      */
-    static getComponentPath(component: Object): string;
+    static getComponentPath(component: Component): string;
     static create(component: any, options: any, data: any): any;
 }
 import BaseEditForm from './_classes/component/Component.form';
+import Component from './_classes/component/Component';

package/lib/cjs/components/Components.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("./_classes/component/Component"));
 const utils_1 = __importDefault(require("./_classes/component/editForm/utils"));
 const Component_form_1 = __importDefault(require("./_classes/component/Component.form"));
+const utils_2 = require("../utils/utils");
 const lodash_1 = __importDefault(require("lodash"));
 class Components {
     static set EditFormUtils(value) {
@@ -50,14 +51,14 @@ class Components {
     }
     /**
      * Return a path of component's value.
-     *
-     * @param {Object} component - The component instance.
-     * @return {string} - The component's value path.
+     * @param {Component} component - The component instance.
+     * @returns {string} - The component's value path.
      */
     static getComponentPath(component) {
         var _a;
         let path = '';
-        if (component.component.key) {
+        const componentKey = (0, utils_2.getComponentKey)(component.component);
+        if (componentKey) {
             let thisPath = ((_a = component.options) === null || _a === void 0 ? void 0 : _a.parent) || component;
             while (thisPath && !thisPath.allowData && thisPath.parent) {
                 thisPath = thisPath.parent;
@@ -69,9 +70,13 @@ class Components {
             const rowIndex = component.row;
             const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
             path = `${thisPath.path}${rowIndexPath}.`;
-            path += component.component.key;
+            if (rowIndexPath && (0, utils_2.getModelType)(thisPath) === 'nestedDataArray') {
+                path = `${path}data.`;
+            }
+            path += componentKey;
             return lodash_1.default.trim(path, '.');
         }
+        return path;
     }
     static create(component, options, data) {
         let comp = null;