@formio/js 5.0.0-rc.26 → 5.0.0-rc.28

package/lib/mjs/Webform.js

@@ -6,7 +6,7 @@ import i18nDefaults from './i18n';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath } from './utils/utils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath, interpolateErrors } from './utils/utils';
 import { eachComponent } from './utils/formUtils';
 // Initialize the available forms.
 Formio.forms = {};
@@ -83,7 +83,6 @@ export default class Webform extends NestedDataComponent {
         else {
             this.triggerSaveDraft = this.saveDraft.bind(this);
         }
-        this.customErrors = [];
         /**
          * Determines if this form should submit the API on submit.
          * @type {boolean}
@@ -779,9 +778,9 @@ export default class Webform extends NestedDataComponent {
         this.component.input = false;
         this.addComponents();
         this.on('submitButton', options => {
-            this.submit(false, options).catch(e => e !== false && console.log(e));
+            this.submit(false, options).catch(e => e !== false && e !== undefined && console.log(e));
         }, true);
-        this.on('checkValidity', (data) => this.checkValidity(data, true, data), true);
+        this.on('checkValidity', (data) => this.validate(data, { dirty: true, process: 'change' }), true);
         this.on('requestUrl', (args) => (this.submitUrl(args.url, args.headers)), true);
         this.on('resetForm', () => this.resetValue(), true);
         this.on('deleteSubmission', () => this.deleteSubmission(), true);
@@ -975,21 +974,14 @@ export default class Webform extends NestedDataComponent {
      * @returns {*}
      */
     /* eslint-disable no-unused-vars */
-    showErrors(error, triggerEvent, onChange) {
-        this.loading = false;
-        let errors = this.errors;
-        if (error) {
-            if (Array.isArray(error)) {
-                errors = errors.concat(error);
-            }
-            else {
-                errors.push(error);
-            }
+    showErrors(errors, triggerEvent, onChange) {
+        if (!errors) {
+            return;
         }
-        else {
-            errors = super.errors;
+        this.loading = false;
+        if (!Array.isArray(errors)) {
+            errors = [errors];
         }
-        errors = errors.concat(this.customErrors);
         errors = errors.concat(this.serverErrors || []);
         if (!errors.length) {
             this.setAlert(false);
@@ -1005,7 +997,7 @@ export default class Webform extends NestedDataComponent {
                 components.push(err.path);
             }
             components.forEach((path) => {
-                const originalPath = this._parentPath + getStringFromComponentPath(path);
+                const originalPath = getStringFromComponentPath(path);
                 const component = this.getComponent(path, _.identity, originalPath);
                 if (err.fromServer) {
                     if (component.serverErrors) {
@@ -1020,42 +1012,31 @@ export default class Webform extends NestedDataComponent {
             });
         });
         const displayedErrors = [];
-        errors.forEach(err => {
-            if (err) {
-                const createListItem = (message, index) => {
-                    const messageFromIndex = !_.isUndefined(index) && err.messages && err.messages[index];
-                    const keyOrPath = (messageFromIndex && messageFromIndex.formattedKeyOrPath || messageFromIndex.path) || (err.component && err.component.key) || err.fromServer && err.path;
-                    let formattedKeyOrPath = keyOrPath ? getStringFromComponentPath(keyOrPath) : '';
-                    formattedKeyOrPath = this._parentPath + formattedKeyOrPath;
-                    if (typeof err !== 'string' && !err.formattedKeyOrPath) {
-                        err.formattedKeyOrPath = formattedKeyOrPath;
-                    }
-                    return {
-                        message: unescapeHTML(message),
-                        keyOrPath: formattedKeyOrPath
-                    };
+        if (errors.length) {
+            errors = _.uniqBy(errors, error => error.message);
+            const createListItem = (message, index) => {
+                const err = errors[index];
+                const messageFromIndex = !_.isUndefined(index) && errors && errors[index];
+                const keyOrPath = (messageFromIndex?.formattedKeyOrPath || messageFromIndex?.path || messageFromIndex?.context?.path) || (err.context?.component && err.context?.component.key) || (err.component && err.component.key) || err.fromServer && err.path;
+                const formattedKeyOrPath = keyOrPath ? getStringFromComponentPath(keyOrPath) : '';
+                if (typeof err !== 'string' && !err.formattedKeyOrPath) {
+                    err.formattedKeyOrPath = formattedKeyOrPath;
+                }
+                return {
+                    message: unescapeHTML(message),
+                    keyOrPath: formattedKeyOrPath
                 };
-                err.messages = _.uniqBy(err.messages, message => message.message);
-                if (err.messages && err.messages.length) {
-                    const { component } = err;
-                    err.messages.forEach(({ message, context, fromServer }, index) => {
-                        const text = context?.hasLabel || fromServer
-                            ? this.t('alertMessage', { message: this.t(message) })
-                            : this.t('alertMessageWithLabel', {
-                                label: this.t(component.label),
-                                message: this.t(message),
-                            });
-                        displayedErrors.push(createListItem(text, index));
+            };
+            errors.forEach(({ message, context, fromServer, component }, index) => {
+                const text = !component?.label || context?.hasLabel || fromServer
+                    ? this.t('alertMessage', { message: this.t(message) })
+                    : this.t('alertMessageWithLabel', {
+                        label: this.t(component?.label),
+                        message: this.t(message),
                     });
-                }
-                else if (err) {
-                    const message = _.isObject(err)
-                        ? this.t('alertMessage', { message: this.t(err.message || '') })
-                        : this.t('alertMessage', { message: this.t(err) });
-                    displayedErrors.push(createListItem(message));
-                }
-            }
-        });
+                displayedErrors.push(createListItem(text, index));
+            });
+        }
         const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });
         this.root.setAlert('danger', errorsList);
         if (triggerEvent) {
@@ -1117,17 +1098,10 @@ export default class Webform extends NestedDataComponent {
             this.emit('change', { isValid: true }, { silent: true });
             return false;
         }
-        let errors;
-        if (this.submitted) {
-            errors = this.showErrors();
-        }
-        else {
-            errors = this.showErrors(error, true);
-        }
+        this.showErrors(error, true);
         if (this.root && this.root.alert) {
             this.scrollIntoView(this.root.alert);
         }
-        return errors;
     }
     /**
      * Trigger the change event for this form.
@@ -1138,10 +1112,6 @@ export default class Webform extends NestedDataComponent {
     onChange(flags, changed, modified, changes) {
         flags = flags || {};
         let isChangeEventEmitted = false;
-        // For any change events, clear any custom errors for that component.
-        if (changed && changed.component) {
-            this.customErrors = this.customErrors.filter(err => err.component && err.component !== changed.component.key);
-        }
         super.onChange(flags, true);
         const value = _.clone(this.submission);
         flags.changed = value.changed = changed;
@@ -1149,10 +1119,13 @@ export default class Webform extends NestedDataComponent {
         if (modified && this.pristine) {
             this.pristine = false;
         }
-        value.isValid = this.checkData(value.data, flags);
+        this.checkData(value.data, flags);
+        const shouldValidate = !flags.noValidate || flags.fromIFrame || (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
+        const errors = shouldValidate ? this.validate(value.data, { ...flags, process: 'change' }) : [];
+        value.isValid = errors.length === 0;
         this.loading = false;
         if (this.submitted) {
-            this.showErrors();
+            this.showErrors(errors);
         }
         // See if we need to save the draft of the form.
         if (modified && this.options.saveDraft) {
@@ -1168,13 +1141,6 @@ export default class Webform extends NestedDataComponent {
             this.initialized = true;
         }
     }
-    checkData(data, flags = {}) {
-        const valid = super.checkData(data, flags);
-        if ((_.isEmpty(flags) || flags.noValidate) && this.submitted) {
-            this.showErrors();
-        }
-        return valid;
-    }
     /**
      * Send a delete request to the server.
      */
@@ -1227,18 +1193,30 @@ export default class Webform extends NestedDataComponent {
             }
             const submission = fastCloneDeep(this.submission || {});
             this.setMetadata(submission);
-            submission.state = options.state || 'submitted';
+            submission.state = options.state || submission.state || 'submitted';
             const isDraft = (submission.state === 'draft');
             this.hook('beforeSubmit', { ...submission, component: options.component }, (err, data) => {
                 if (err) {
                     return reject(err);
                 }
                 submission._vnote = data && data._vnote ? data._vnote : '';
-                if (!isDraft && !submission.data) {
-                    return reject('Invalid Submission');
+                try {
+                    if (!isDraft && !options.noValidate) {
+                        if (!submission.data) {
+                            return reject('Invalid Submission');
+                        }
+                        const errors = this.validate(submission.data, {
+                            dirty: true,
+                            silentCheck: false,
+                            process: 'submit'
+                        });
+                        if (errors.length || options.beforeSubmitResults?.some((result) => result.status === 'rejected')) {
+                            return reject(errors);
+                        }
+                    }
                 }
-                if (!isDraft && !this.checkValidity(submission.data, true)) {
-                    return reject();
+                catch (err) {
+                    console.error(err);
                 }
                 this.everyComponent((comp) => {
                     if (submission._vnote && comp.type === 'form' && comp.component.reference) {
@@ -1259,9 +1237,7 @@ export default class Webform extends NestedDataComponent {
                         }
                         // Ensure err is an array.
                         err = Array.isArray(err) ? err : [err];
-                        // Set as custom errors.
-                        this.customErrors = err;
-                        return reject();
+                        return reject(err);
                     }
                     this.loading = true;
                     // Use the form action to submit the form if available.
@@ -1356,7 +1332,7 @@ export default class Webform extends NestedDataComponent {
      *
      * @returns {Promise} - A promise when the form is done submitting.
      */
-    submit(before, options) {
+    submit(before, options = {}) {
         this.submissionInProcess = true;
         if (!before) {
             return this.beforeSubmit(options).then(() => this.executeSubmit(options));

package/lib/mjs/WebformBuilder.d.ts

@@ -73,7 +73,7 @@ export default class WebformBuilder extends Component {
     setForm(form: any): any;
     keyboardActionsEnabled: any;
     populateRecaptchaSettings(form: any): void;
-    removeComponent(component: any, parent: any, original: any): boolean | undefined;
+    removeComponent(component: any, parent: any, original: any, componentInstance: any): boolean | undefined;
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;
     findRepeatablePaths(): any[];

package/lib/mjs/WebformBuilder.js

@@ -347,7 +347,7 @@ export default class WebformBuilder extends Component {
         }
         if (component.refs.removeComponent) {
             this.attachTooltip(component.refs.removeComponent, this.t('Remove'));
-            component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component));
+            component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component, component));
         }
         return element;
     }
@@ -721,6 +721,10 @@ export default class WebformBuilder extends Component {
             }
         }
         if (info) {
+            //if this is a custom component that was already assigned a key, don't stomp on it
+            if (!Components.components.hasOwnProperty(info.type) && info.key) {
+                return info;
+            }
             info.key = this.generateKey(info);
         }
         return info;
@@ -924,7 +928,7 @@ export default class WebformBuilder extends Component {
             }
         }
     }
-    removeComponent(component, parent, original) {
+    removeComponent(component, parent, original, componentInstance) {
         if (!parent) {
             return;
         }
@@ -950,6 +954,9 @@ export default class WebformBuilder extends Component {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
+            if (component.input && componentInstance && componentInstance.parent) {
+                _.unset(componentInstance._data, componentInstance.key);
+            }
             const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {
                 this.emit('removeComponent', component, parent.formioComponent.schema, path, index);
@@ -1079,11 +1086,12 @@ export default class WebformBuilder extends Component {
         let hasInvalidComponents = false;
         this.webform.everyComponent((comp) => {
             const path = comp.path;
+            const errors = comp.visibleErrors || [];
             if (repeatablePaths.includes(path)) {
                 comp.setCustomValidity(`API Key is not unique: ${comp.key}`);
                 hasInvalidComponents = true;
             }
-            else if (comp.error?.message?.startsWith('API Key is not unique')) {
+            else if (errors.length && errors[0].message?.startsWith('API Key is not unique')) {
                 comp.setCustomValidity('');
             }
         });
@@ -1176,9 +1184,12 @@ export default class WebformBuilder extends Component {
         saveButtons.forEach((saveButton) => {
             this.editForm.addEventListener(saveButton, 'click', (event) => {
                 event.preventDefault();
-                if (!this.editForm.checkValidity(this.editForm.data, true, this.editForm.data)) {
+                const errors = this.editForm.validate(this.editForm.data, {
+                    dirty: true
+                });
+                if (errors.length) {
                     this.editForm.setPristine(false);
-                    this.editForm.showErrors();
+                    this.editForm.showErrors(errors);
                     return false;
                 }
                 this.saved = true;
@@ -1233,7 +1244,11 @@ export default class WebformBuilder extends Component {
         this.editForm = new Webform({
             ..._.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit']),
             language: this.options.language,
-            ...editFormOptions
+            ...editFormOptions,
+            evalContext: {
+                ...(editFormOptions?.evalContext || this.options?.evalContext || {}),
+                buildingForm: this.form,
+            },
         });
         this.hook('editFormProperties', parent);
         this.editForm.form = (isJsonEdit && !isCustom) ? {
@@ -1339,8 +1354,14 @@ export default class WebformBuilder extends Component {
                         }
                     }
                 }
+                // If the edit form has any nested form inside, we get a partial data (nested form's data) in the
+                // event.data property
+                let editFormData;
+                if (event.changed.instance && event.changed.instance.root && event.changed.instance.root.id !== this.editForm.id) {
+                    editFormData = this.editForm.data;
+                }
                 // Update the component.
-                this.updateComponent(event.data.componentJson || event.data, event.changed);
+                this.updateComponent(event.data.componentJson || editFormData || event.data, event.changed);
             }
         });
         this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);

package/lib/mjs/Wizard.d.ts

@@ -70,6 +70,7 @@ declare class Wizard extends Webform {
     beforePage(next: any): Promise<any>;
     emitNextPage(): void;
     nextPage(): Promise<void>;
+    validateCurrentPage(flags?: {}): any;
     emitPrevPage(): void;
     prevPage(): Promise<void>;
     cancel(noconfirm: any): Promise<void> | Promise<number>;
@@ -84,6 +85,7 @@ declare class Wizard extends Webform {
     hasButton(name: any, nextPage?: number | null): any;
     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;
 }
 declare namespace Wizard {

package/lib/mjs/Wizard.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
-import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent } from './utils/utils';
+import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, unescapeHTML } from './utils/utils';
 export default class Wizard extends Webform {
     /**
      * Constructor for wizard based forms
@@ -172,7 +172,9 @@ export default class Wizard extends Webform {
         return this.renderTemplate('wizardNav', ctx);
     }
     prepareHeaderSettings(ctx, headerType) {
-        if (this.currentPanel && this.currentPanel.breadcrumb === 'none' || ctx.isSubForm) {
+        const shouldHideBreadcrumbs = this.currentPanel?.breadcrumb === 'none' ||
+            _.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';
+        if (shouldHideBreadcrumbs || ctx.isSubForm) {
             return null;
         }
         return this.renderTemplate(headerType, ctx);
@@ -570,6 +572,7 @@ export default class Wizard extends Webform {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
+                this.validateCurrentPage();
             });
             return Promise.resolve();
         }
@@ -665,7 +668,8 @@ export default class Wizard extends Webform {
             });
         }
         // Validate the form, before go to the next page
-        if (this.checkValidity(this.localData, true, this.localData, true)) {
+        const errors = this.validateCurrentPage({ dirty: true });
+        if (errors.length === 0) {
             this.checkData(this.submission.data);
             return this.beforePage(true).then(() => {
                 return this.setPage(this.getNextPage()).then(() => {
@@ -680,9 +684,13 @@ export default class Wizard extends Webform {
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
             this.scrollIntoView(this.element);
-            return Promise.reject(this.showErrors([], true));
+            return Promise.reject(this.showErrors(errors, true));
         }
     }
+    validateCurrentPage(flags = {}) {
+        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
+        return this.currentPage?.parent.validateComponents(this.currentPage.component.components, this.currentPage.parent.data, flags);
+    }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
     }
@@ -759,7 +767,7 @@ export default class Wizard extends Webform {
         return super.setForm(form, flags);
     }
     onSetForm(clonedForm, initialForm) {
-        this.component.components = (this._parentPath ? initialForm.components : clonedForm.components) || [];
+        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];
         this.setComponentSchema();
     }
     setEditMode(submission) {
@@ -772,7 +780,9 @@ export default class Wizard extends Webform {
         const changed = this.getPages({ all: true }).reduce((changed, page) => {
             return this.setNestedValue(page, submission.data, flags, changed) || changed;
         }, false);
-        if (!flags.sanitize) {
+        if (!flags.sanitize ||
+            (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id) ||
+            (this.options.server && (this.prefixComps.length || this.suffixComps.length))) {
             this.mergeData(this.data, submission.data);
         }
         if (changed) {
@@ -823,9 +833,9 @@ export default class Wizard extends Webform {
     }
     onChange(flags, changed, modified, changes) {
         super.onChange(flags, changed, modified, changes);
-        if (this.alert && !this.submitted) {
-            this.checkValidity(this.localData, false, this.localData, true);
-            this.showErrors([], true, true);
+        const errors = this.validate(this.localData, { dirty: false });
+        if (this.alert) {
+            this.showErrors(errors, true, true);
         }
         // If the pages change, need to redraw the header.
         let currentPanels;
@@ -861,7 +871,7 @@ export default class Wizard extends Webform {
         }
         return super.redraw();
     }
-    checkValidity(data, dirty, row, currentPageOnly) {
+    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {
         if (!this.checkCondition(row, data)) {
             this.setCustomValidity('');
             return true;
@@ -869,7 +879,7 @@ export default class Wizard extends Webform {
         const components = !currentPageOnly || this.isLastPage()
             ? this.getComponents()
             : this.currentPage.components;
-        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row) && check, true);
+        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, childErrors) && check, true);
     }
     get errors() {
         if (!this.isLastPage()) {
@@ -878,23 +888,22 @@ export default class Wizard extends Webform {
         return super.errors;
     }
     focusOnComponent(key) {
-        let pageIndex = 0;
-        const [page] = this.pages.filter((page, index) => {
-            let hasComponent = false;
-            page.getComponent(key, (comp) => {
-                if (comp.path === key) {
-                    pageIndex = index;
-                    hasComponent = true;
+        const component = this.getComponent(key);
+        if (component) {
+            let topPanel = component.parent;
+            while (!(topPanel.parent instanceof Wizard)) {
+                topPanel = topPanel.parent;
+            }
+            const pageIndex = this.pages.findIndex(page => page === topPanel);
+            if (pageIndex >= 0) {
+                const page = this.pages[pageIndex];
+                if (page && page !== this.currentPage) {
+                    return this.setPage(pageIndex).then(() => {
+                        this.showErrors(this.validate(this.localData, { dirty: true }));
+                        super.focusOnComponent(key);
+                    });
                 }
-            });
-            return hasComponent;
-        });
-        if (page && page !== this.currentPage) {
-            return this.setPage(pageIndex).then(() => {
-                this.checkValidity(this.submission.data, true, this.submission.data);
-                this.showErrors();
-                super.focusOnComponent(key);
-            });
+            }
         }
         return super.focusOnComponent(key);
     }

package/lib/mjs/WizardBuilder.d.ts

@@ -9,6 +9,7 @@ export default class WizardBuilder extends WebformBuilder {
         }[];
     };
     page: number;
+    removeComponent(component: any, parent: any, original: any): boolean | undefined;
     allowDrop(element: any): boolean;
     get pages(): any;
     get currentPage(): any;

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

@@ -698,8 +698,7 @@ export default class PasswordStrengthAddon extends FormioAddon {
      * @param {string} value - Suggested password
      */
     checkValidity(value: string): boolean;
-    errors: any[] | undefined;
-    handleBlackListCheckResult(result: any): void;
+    handleBlackListCheckResult(result: any, errors: any): void;
     levels: any[];
     maxEntropy: any;
     attach(element: any): void;

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

@@ -261,30 +261,29 @@ export default class PasswordStrengthAddon extends FormioAddon {
     checkValidity(value) {
         const passwordLength = value.length;
         const { charactersPoolSize, errors } = this.performChecks(value);
-        this.errors = errors;
         const entropy = this.calculatePasswordEntropy(passwordLength, charactersPoolSize);
         const blackListCheck = this.settings.blackList?.length || this.settings.customBlacklistedWords ?
             this.checkBlackList(value)
             : null;
+        const isValid = this.isValid();
+        if (!isValid) {
+            errors.push({
+                message: 'Password is not strong enough',
+                level: this.settings.required ? 'error' : 'warning'
+            });
+        }
         // If there were found some words from the black list
         if (blackListCheck && blackListCheck !== true) {
-            this.handleBlackListCheckResult(blackListCheck);
+            this.handleBlackListCheckResult(blackListCheck, errors);
             // Select the mininal entropy based on the dictionary check or symbolic check
             this.entropy = Math.min(entropy, blackListCheck.entropy);
         }
         else {
             this.entropy = entropy;
         }
-        const isValid = this.isValid();
-        if (!isValid) {
-            this.errors.push({
-                message: 'Password is not strong enough',
-                level: this.settings.required ? 'error' : 'warning'
-            });
-        }
-        return !this.errors.length;
+        return !errors.length;
     }
-    handleBlackListCheckResult(result) {
+    handleBlackListCheckResult(result, errors) {
         const blacklistedWords = result.blacklistedWords;
         const isRequired = this.settings.disableBlacklistedWords;
         const message = `Password ${isRequired ? 'must' : 'should'} not include common words: ${blacklistedWords.join(', ')}`;
@@ -292,7 +291,7 @@ export default class PasswordStrengthAddon extends FormioAddon {
             name: 'blacklist',
             required: isRequired,
         };
-        this.handleRuleCheckResult(false, validation, message, this.errors);
+        this.handleRuleCheckResult(false, validation, message, errors);
     }
     constructor(settings, componentInstance) {
         super(settings, componentInstance);

package/lib/mjs/addons/index.d.ts

@@ -592,6 +592,7 @@ export const editForms: {
         multiple?: undefined;
         hideLabel?: undefined;
     })[];
+    tableView: boolean;
     defaultValue: {
         data: {
             rulesSettings: {

package/lib/mjs/addons/index.js

@@ -6,7 +6,11 @@ export const editForms = [
     key: 'settings',
     display: 'form',
     input: true,
-    components,
+    components: components.map((comp) => {
+        comp.tableView = false;
+        return comp;
+    }),
+    tableView: false,
     defaultValue: {
         data: defaultSettings
     },

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

@@ -253,6 +253,13 @@ export default class Components {
     static setComponents(comps: any): void;
     static addComponent(name: any, comp: any): void;
     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.
+     */
+    static getComponentPath(component: Object): string;
     static create(component: any, options: any, data: any): any;
 }
 import BaseEditForm from './_classes/component/Component.form';

package/lib/mjs/components/Components.js

@@ -45,6 +45,30 @@ class Components {
     static setComponent(name, comp) {
         Components.components[name] = comp;
     }
+    /**
+     * Return a path of component's value.
+     *
+     * @param {Object} component - The component instance.
+     * @return {string} - The component's value path.
+     */
+    static getComponentPath(component) {
+        let path = '';
+        if (component.component.key) {
+            let thisPath = component.options?.parent || component;
+            while (thisPath && !thisPath.allowData && thisPath.parent) {
+                thisPath = thisPath.parent;
+            }
+            // TODO: any component that is nested in e.g. a Data Grid or an Edit Grid is going to receive a row prop; the problem
+            // is that options.row is passed to each further nested component, which results in erroneous paths like
+            // `editGrid[0].container[0].textField` rather than `editGrid[0].container.textField`. This should be adapted for other
+            // components with a tree-like data model
+            const rowIndex = component.row;
+            const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
+            path = `${thisPath.path}${rowIndexPath}.`;
+            path += component.component.key;
+            return _.trim(path, '.');
+        }
+    }
     static create(component, options, data) {
         let comp = null;
         if (component.type && Components.components.hasOwnProperty(component.type)) {
@@ -69,6 +93,11 @@ class Components {
         else {
             comp = new Component(component, options, data);
         }
+        const path = Components.getComponentPath(comp);
+        if (path) {
+            comp.path = path;
+            comp.componentsMap[comp.path] = comp;
+        }
         return comp;
     }
 }