diff --git a/Changelog.md b/Changelog.md index cb2acc6ac1..70b570c9f0 100644 --- a/Changelog.md +++ b/Changelog.md @@ -149,6 +149,12 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e const textField = form.getComponent('textField'); console.log(textField.errors[0].message); // 5.x way of getting the error message for the first error. ``` + - EditGrid **validateRows** method now returns an array of errors instead of a boolean "true" or "false". If you wish to do the same thing as before 5.x, then you can use the following code. + + ```js + const isValid = form.getComponent('editgrid').validateRow().length === 0; + ``` + - In the 5.x renderer, the errors array will always be populated if there are errors in the form. They may not be displayed depending on the "pristine" state of the rendered form, but the error is always populated if there are form errors. This is different in 4.x where the error property would only contain and error if an error is VISIBLE on the form. This means that it is difficult to determine if a form has errors without executing the checkValidity() method with the dirty flag set to "true". You no longer need to do this in the 5.x renderer. **4.x Renderer** diff --git a/src/Embed.js b/src/Embed.js index 521635eea9..bcc46eb9b6 100644 --- a/src/Embed.js +++ b/src/Embed.js @@ -288,7 +288,8 @@ export class Formio { }] }])); - const renderer = Formio.config.debug ? 'formio.form' : 'formio.form.min'; + const formioSrc = Formio.config.full ? 'formio.full' : 'formio.form'; + const renderer = Formio.config.debug ? formioSrc : `${formioSrc}.min`; Formio.FormioClass = await Formio.addScript( wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/${renderer}.js`, builder), @@ -342,7 +343,10 @@ export class Formio { // Called after an instance has been created. static async afterCreate(instance, wrapper, readyEvent) { - wrapper.removeChild(wrapper.querySelector('.formio-loader')); + const loader = wrapper.querySelector('.formio-loader'); + if (loader) { + wrapper.removeChild(loader); + } Formio.FormioClass.events.emit(readyEvent, instance); if (Formio.config.after) { Formio.debug('Calling ready callback'); @@ -353,6 +357,12 @@ export class Formio { // Create a new form. static async createForm(element, form, options = {}) { + if (Formio.FormioClass) { + return Formio.FormioClass.createForm(element, form, { + ...options, + ...{ noLoader: true } + }); + } const wrapper = await Formio.init(element, options); return Formio.FormioClass.createForm(element, form, { ...options, @@ -372,6 +382,9 @@ export class Formio { // Create a form builder. static async builder(element, form, options = {}) { + if (Formio.FormioClass?.builder) { + return Formio.FormioClass.builder(element, form, options); + } const wrapper = await Formio.init(element, options, true); return Formio.FormioClass.builder(element, form, options).then((instance) => { Formio.afterCreate(instance, wrapper, 'builderEmbedded'); @@ -382,6 +395,9 @@ export class Formio { // Create a report. static Report = { create: async(element, submission, options = {}) => { + if (Formio.FormioClass?.Report) { + return Formio.FormioClass.Report.create(element, submission, options); + } const wrapper = await Formio.init(element, options, true); return Formio.FormioClass.Report.create(element, submission, options).then((instance) => { Formio.afterCreate(instance, wrapper, 'reportEmbedded'); @@ -407,6 +423,9 @@ export class Form { } init() { + if (this.instance && !this.instance.proxy) { + this.instance.destroy(); + } this.element.innerHTML = ''; this.ready = this.create().then((instance) => { this.instance = instance; @@ -419,12 +438,23 @@ export class Form { return Formio.createForm(this.element, this.form, this.options); } + setForm(form) { + this.form = form; + if (this.instance) { + this.instance.setForm(form); + } + } + setDisplay(display) { if (this.instance.proxy) { return this.ready; } this.form.display = display; - this.init(); + this.instance.destroy(); + this.ready = this.create().then((instance) => { + this.instance = instance; + this.setForm(this.form); + }); return this.ready; } } diff --git a/src/WizardBuilder.js b/src/WizardBuilder.js index 235c5e9171..08f3579af4 100644 --- a/src/WizardBuilder.js +++ b/src/WizardBuilder.js @@ -106,7 +106,7 @@ export default class WizardBuilder extends WebformBuilder { return (pages && (pages.length >= this.page)) ? pages[this.page] : null; } - set form(value) { + setForm(value) { this._form = value; if (!this._form.components || !Array.isArray(this._form.components)) { this._form.components = []; @@ -124,6 +124,10 @@ export default class WizardBuilder extends WebformBuilder { this.rebuild(); } + set form(value) { + this.setForm(value); + } + get form() { return this._form; } diff --git a/src/components/_classes/component/Component.js b/src/components/_classes/component/Component.js index aeae63ae81..701bf5106c 100644 --- a/src/components/_classes/component/Component.js +++ b/src/components/_classes/component/Component.js @@ -2204,7 +2204,7 @@ export default class Component extends Element { if (this.options.onChange) { this.options.onChange(...args); } - else if (this.root) { + else if (this.root && this.root.triggerChange) { this.root.triggerChange(...args); } } diff --git a/src/components/_classes/nestedarray/NestedArrayComponent.js b/src/components/_classes/nestedarray/NestedArrayComponent.js index 997b900653..6aa4ddde64 100644 --- a/src/components/_classes/nestedarray/NestedArrayComponent.js +++ b/src/components/_classes/nestedarray/NestedArrayComponent.js @@ -74,6 +74,11 @@ export default class NestedArrayComponent extends NestedDataComponent { return this.validateComponents([this.component], data, flags); } + checkRow(...args) { + console.log('Deprecation Warning: checkRow method has been replaced with processRow'); + return this.processRow.call(this, ...args); + } + processRow(method, data, opts, row, components, silentCheck) { if (opts?.isolateRow) { silentCheck = true; diff --git a/src/components/editgrid/EditGrid.js b/src/components/editgrid/EditGrid.js index 70895c1a5b..ad4ae80a36 100644 --- a/src/components/editgrid/EditGrid.js +++ b/src/components/editgrid/EditGrid.js @@ -9,8 +9,7 @@ import { fastCloneDeep, Evaluator, getArrayFromComponentPath, - eachComponent, - getComponentsSchema + eachComponent } from '../../utils/utils'; const EditRowState = {