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

package/dist/formio.utils.min.js.LICENSE.txt

@@ -10,9 +10,9 @@
  * MIT licensed
  */
 
-/*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
+/*! @license DOMPurify 3.0.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.6/LICENSE */
 
-/*! formiojs v5.0.0-rc.25 | https://unpkg.com/formiojs@5.0.0-rc.25/LICENSE.txt */
+/*! formiojs v5.0.0-rc.28 | https://unpkg.com/formiojs@5.0.0-rc.28/LICENSE.txt */
 
 /**
  * @license

package/lib/cjs/Embed.d.ts

@@ -5,6 +5,7 @@ export class Formio {
     static config: {};
     static cdn: null;
     static proxy: boolean;
+    static version: string;
     static setBaseUrl(url: any): Promise<void>;
     static setProjectUrl(url: any): Promise<void>;
     static debug(...args: any[]): void;
@@ -15,7 +16,7 @@ export class Formio {
     static addStyles(wrapper: any, href: any): Promise<void>;
     static submitDone(instance: any, submission: any): Promise<void>;
     static formioScript(script: any, builder: any): any;
-    static init(element: any, builder?: boolean): Promise<any>;
+    static init(element: any, options?: {}, builder?: boolean): Promise<any>;
     static createForm(element: any, form: any, options: any): Promise<any>;
     static builder(element: any, form: any, options: any): Promise<any>;
 }

package/lib/cjs/Embed.js

@@ -136,10 +136,14 @@ class Formio {
     }
     // Return the full script if the builder is being used.
     static formioScript(script, builder) {
-        return builder ? script.replace('formio.form', 'formio.full') : script;
+        if (Formio.fullAdded || builder) {
+            Formio.fullAdded = true;
+            return script.replace('formio.form', 'formio.full');
+        }
+        return script;
     }
     // eslint-disable-next-line max-statements
-    static init(element, builder = false) {
+    static init(element, options = {}, builder = false) {
         return __awaiter(this, void 0, void 0, function* () {
             Formio.cdn = new CDN_js_1.default(Formio.config.cdn);
             Formio.config.libs = Formio.config.libs || {
@@ -157,10 +161,17 @@ class Formio {
             };
             const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
             // Create a new wrapper and add the element inside of a new wrapper.
-            const wrapper = Formio.createElement('div', {
+            let wrapper = Formio.createElement('div', {
                 'id': `"${id}-wrapper"`
             });
             element.parentNode.insertBefore(wrapper, element);
+            // If we include the libraries, then we will attempt to run this in shadow dom.
+            if (Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function') && !Formio.config.premium) {
+                wrapper = wrapper.attachShadow({
+                    mode: 'open'
+                });
+                options.shadowRoot = wrapper;
+            }
             element.parentNode.removeChild(element);
             wrapper.appendChild(element);
             // Load the renderer styles.
@@ -180,7 +191,8 @@ class Formio {
                             }
                         }]
                 }]));
-            Formio.FormioClass = yield Formio.addScript(wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/formio.form.min.js`, builder), 'Formio');
+            const renderer = Formio.config.debug ? 'formio.form' : 'formio.form.min';
+            Formio.FormioClass = yield Formio.addScript(wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/${renderer}.js`, builder), 'Formio');
             Formio.FormioClass.setBaseUrl(Formio.baseUrl || Formio.config.base);
             Formio.FormioClass.setProjectUrl(Formio.projectUrl || Formio.config.project);
             Formio.FormioClass.language = Formio.language;
@@ -222,7 +234,7 @@ class Formio {
                 Formio.debug('Using premium');
                 Formio.FormioClass.use(yield Formio.addScript(wrapper, Formio.config.premium.js, 'premium'));
             }
-            yield Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/formio.form.min.css`, builder));
+            yield Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/${renderer}.css`, builder));
             if (Formio.config.before) {
                 yield Formio.config.before(Formio.FormioClass, element, Formio.config);
             }
@@ -232,7 +244,7 @@ class Formio {
     }
     static createForm(element, form, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            const wrapper = yield Formio.init(element);
+            const wrapper = yield Formio.init(element, options);
             return Formio.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {
                 Formio.debug('Form created', instance);
                 // Remove the loader.
@@ -257,7 +269,7 @@ class Formio {
     }
     static builder(element, form, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            const wrapper = yield Formio.init(element, true);
+            const wrapper = yield Formio.init(element, options, true);
             return Formio.FormioClass.builder(element, form, options).then((instance) => {
                 Formio.debug('Builder created', instance);
                 Formio.debug('Removing loader');
@@ -276,6 +288,7 @@ class Formio {
 Formio.config = {};
 Formio.cdn = null;
 Formio.proxy = true;
+Formio.version = 'FORMIO_VERSION';
 exports.Formio = Formio;
 class Form {
     constructor(element, form, options) {

package/lib/cjs/PDF.js

@@ -241,7 +241,7 @@ class PDF extends Webform_1.default {
         const helpBlock = document.getElementById('submit-error');
         const submitError = this.t('submitError');
         const isSubmitErrorShown = ((_a = this.refs.buttonMessage) === null || _a === void 0 ? void 0 : _a.textContent.trim()) === submitError;
-        if (!helpBlock && this.errors.length && !isSubmitErrorShown) {
+        if (!helpBlock && error.length && !isSubmitErrorShown) {
             const p = this.ce('p', { class: 'help-block' });
             this.setContent(p, submitError);
             p.addEventListener('click', () => {
@@ -251,7 +251,7 @@ class PDF extends Webform_1.default {
             this.appendTo(p, div);
             this.appendTo(div, this.element);
         }
-        if (!this.errors.length && helpBlock) {
+        if (!error.length && helpBlock) {
             helpBlock.remove();
         }
         super.showErrors(error, triggerEvent);

package/lib/cjs/Webform.d.ts

@@ -20,7 +20,6 @@ declare class Webform extends NestedDataComponent {
     draftEnabled: boolean;
     savingDraft: boolean;
     triggerSaveDraft: any;
-    customErrors: any[];
     set nosubmit(arg: any);
     get nosubmit(): any;
     /**
@@ -327,7 +326,7 @@ declare class Webform extends NestedDataComponent {
      * @param {Object} error - An optional additional error to display along with the component errors.
      * @returns {*}
      */
-    showErrors(error: Object, triggerEvent: any, onChange: any): any;
+    showErrors(errors: any, triggerEvent: any, onChange: any): any;
     /**
      * Called when the submission has completed, or if the submission needs to be sent to an external library.
      *
@@ -342,7 +341,7 @@ declare class Webform extends NestedDataComponent {
      *
      * @param {Object} error - The error that occured.
      */
-    onSubmissionError(error: Object): any;
+    onSubmissionError(error: Object): false | undefined;
     /**
      * Trigger the change event for this form.
      *
@@ -350,7 +349,6 @@ declare class Webform extends NestedDataComponent {
      * @param flags
      */
     onChange(flags: any, changed: any, modified: any, changes: any): void;
-    checkData(data: any, flags?: {}): any;
     /**
      * Send a delete request to the server.
      */
@@ -388,7 +386,7 @@ declare class Webform extends NestedDataComponent {
      *
      * @returns {Promise} - A promise when the form is done submitting.
      */
-    submit(before: boolean, options: any): Promise<any>;
+    submit(before: boolean, options?: {}): Promise<any>;
     submitUrl(URL: any, headers: any): void;
     triggerRecaptcha(): void;
     _nosubmit: any;

package/lib/cjs/Webform.js

@@ -115,7 +115,6 @@ class Webform extends NestedDataComponent_1.default {
         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 @@ class Webform extends NestedDataComponent_1.default {
         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 @@ class Webform extends NestedDataComponent_1.default {
      * @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 @@ class Webform extends NestedDataComponent_1.default {
                 components.push(err.path);
             }
             components.forEach((path) => {
-                const originalPath = this._parentPath + (0, utils_1.getStringFromComponentPath)(path);
+                const originalPath = (0, utils_1.getStringFromComponentPath)(path);
                 const component = this.getComponent(path, lodash_1.default.identity, originalPath);
                 if (err.fromServer) {
                     if (component.serverErrors) {
@@ -1020,42 +1012,32 @@ class Webform extends NestedDataComponent_1.default {
             });
         });
         const displayedErrors = [];
-        errors.forEach(err => {
-            if (err) {
-                const createListItem = (message, index) => {
-                    const messageFromIndex = !lodash_1.default.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 ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : '';
-                    formattedKeyOrPath = this._parentPath + formattedKeyOrPath;
-                    if (typeof err !== 'string' && !err.formattedKeyOrPath) {
-                        err.formattedKeyOrPath = formattedKeyOrPath;
-                    }
-                    return {
-                        message: (0, utils_1.unescapeHTML)(message),
-                        keyOrPath: formattedKeyOrPath
-                    };
+        if (errors.length) {
+            errors = lodash_1.default.uniqBy(errors, error => error.message);
+            const createListItem = (message, index) => {
+                var _a, _b, _c;
+                const err = errors[index];
+                const messageFromIndex = !lodash_1.default.isUndefined(index) && errors && errors[index];
+                const keyOrPath = ((messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.formattedKeyOrPath) || (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.path) || ((_a = messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.context) === null || _a === void 0 ? void 0 : _a.path)) || (((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) || (err.component && err.component.key) || err.fromServer && err.path;
+                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : '';
+                if (typeof err !== 'string' && !err.formattedKeyOrPath) {
+                    err.formattedKeyOrPath = formattedKeyOrPath;
+                }
+                return {
+                    message: (0, utils_1.unescapeHTML)(message),
+                    keyOrPath: formattedKeyOrPath
                 };
-                err.messages = lodash_1.default.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 === null || context === void 0 ? void 0 : 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 === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer
+                    ? this.t('alertMessage', { message: this.t(message) })
+                    : this.t('alertMessageWithLabel', {
+                        label: this.t(component === null || component === void 0 ? void 0 : component.label),
+                        message: this.t(message),
                     });
-                }
-                else if (err) {
-                    const message = lodash_1.default.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) {
@@ -1118,17 +1100,10 @@ class Webform extends NestedDataComponent_1.default {
             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.
@@ -1139,10 +1114,6 @@ class Webform extends NestedDataComponent_1.default {
     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 = lodash_1.default.clone(this.submission);
         flags.changed = value.changed = changed;
@@ -1150,10 +1121,13 @@ class Webform extends NestedDataComponent_1.default {
         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, Object.assign(Object.assign({}, 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) {
@@ -1169,13 +1143,6 @@ class Webform extends NestedDataComponent_1.default {
             this.initialized = true;
         }
     }
-    checkData(data, flags = {}) {
-        const valid = super.checkData(data, flags);
-        if ((lodash_1.default.isEmpty(flags) || flags.noValidate) && this.submitted) {
-            this.showErrors();
-        }
-        return valid;
-    }
     /**
      * Send a delete request to the server.
      */
@@ -1228,18 +1195,31 @@ class Webform extends NestedDataComponent_1.default {
             }
             const submission = (0, utils_1.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', Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {
+                var _a;
                 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 || ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.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) {
@@ -1260,9 +1240,7 @@ class Webform extends NestedDataComponent_1.default {
                         }
                         // 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.
@@ -1358,7 +1336,7 @@ class Webform extends NestedDataComponent_1.default {
      *
      * @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/cjs/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/cjs/WebformBuilder.js

@@ -361,7 +361,7 @@ class WebformBuilder extends Component_1.default {
         }
         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;
     }
@@ -735,6 +735,10 @@ class WebformBuilder extends Component_1.default {
             }
         }
         if (info) {
+            //if this is a custom component that was already assigned a key, don't stomp on it
+            if (!Components_1.default.components.hasOwnProperty(info.type) && info.key) {
+                return info;
+            }
             info.key = this.generateKey(info);
         }
         return info;
@@ -940,7 +944,7 @@ class WebformBuilder extends Component_1.default {
             }
         }
     }
-    removeComponent(component, parent, original) {
+    removeComponent(component, parent, original, componentInstance) {
         if (!parent) {
             return;
         }
@@ -966,6 +970,9 @@ class WebformBuilder extends Component_1.default {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
+            if (component.input && componentInstance && componentInstance.parent) {
+                lodash_1.default.unset(componentInstance._data, componentInstance.key);
+            }
             const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {
                 this.emit('removeComponent', component, parent.formioComponent.schema, path, index);
@@ -1094,13 +1101,14 @@ class WebformBuilder extends Component_1.default {
         const repeatablePaths = this.findRepeatablePaths();
         let hasInvalidComponents = false;
         this.webform.everyComponent((comp) => {
-            var _a, _b;
+            var _a;
             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 ((_b = (_a = comp.error) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.startsWith('API Key is not unique')) {
+            else if (errors.length && ((_a = errors[0].message) === null || _a === void 0 ? void 0 : _a.startsWith('API Key is not unique'))) {
                 comp.setCustomValidity('');
             }
         });
@@ -1193,9 +1201,12 @@ class WebformBuilder extends Component_1.default {
         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;
@@ -1221,7 +1232,7 @@ class WebformBuilder extends Component_1.default {
         });
     }
     editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {
-        var _a;
+        var _a, _b;
         if (!component.key) {
             return;
         }
@@ -1248,7 +1259,7 @@ class WebformBuilder extends Component_1.default {
         editFormOptions.editComponent = component;
         editFormOptions.flags = flags;
         this.hook('editComponentParentInstance', editFormOptions, parent);
-        this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit'])), { language: this.options.language }), editFormOptions));
+        this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit'])), { language: this.options.language }), editFormOptions), { evalContext: Object.assign(Object.assign({}, ((editFormOptions === null || editFormOptions === void 0 ? void 0 : editFormOptions.evalContext) || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.evalContext) || {})), { buildingForm: this.form }) }));
         this.hook('editFormProperties', parent);
         this.editForm.form = (isJsonEdit && !isCustom) ? {
             components: [
@@ -1296,7 +1307,7 @@ class WebformBuilder extends Component_1.default {
             ]));
             this.hook('previewFormSettitngs', schema, isJsonEdit);
         }
-        this.showPreview = (_a = ComponentClass.builderInfo.showPreview) !== null && _a !== void 0 ? _a : true;
+        this.showPreview = (_b = ComponentClass.builderInfo.showPreview) !== null && _b !== void 0 ? _b : true;
         this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });
         this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {
             componentInfo: ComponentClass.builderInfo,
@@ -1353,8 +1364,14 @@ class WebformBuilder extends Component_1.default {
                         }
                     }
                 }
+                // 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/cjs/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 {