Skip to content

Effectively update components in nested form #6183

@petrbizon

Description

@petrbizon

Is your feature request related to a problem? Please describe.
In version v5.0.2 when I set in Nested form component to formObj.components, for example:

[ { "label": "Text Field", "applyMaskOn": "change", "tableView": true, "validate": {"required": true}, "validateWhenHidden": false, "key": "textField", "type": "textfield", "input": true } ]

and then i redraw() nested form, validation was functioning for new components. Now in version v5.3.0-rc.2 it somehow validates previous components.

Describe the solution you'd like
I suggest add this method to componenst/Form.js:

`

 updateComponents(components, recreateSubForm = true) {
  if (!Array.isArray(components)) {
	throw new Error('Components must be an array');
  }

  // Update formObj
  this.formObj = {
	...this.formObj,
	components: components
  };

  // Update component definition
  this.component.components = components;

  // If recreateSubForm is false, just update the references
  if (!recreateSubForm) {
	return;
  }

  // Destroy existing subForm
  if (this.subForm) {
	this.subForm.destroy();
	this.subForm = null;
	this.subFormReady = null;
  }

  // Clear the old content BEFORE creating new subForm
  if (this.element) {
	const contentElement = this.element.querySelector('.formio-component-content');
	if (contentElement) {
	  contentElement.innerHTML = '';
	} else {
	  // Fallback - clear the main element content
	  this.empty(this.element);
	}
  }

  // Create new subForm
  this.createSubForm().then((subForm) => {
	if (this.element && subForm) {
	  // Set the new content
	  this.setContent(this.element, this.render());
	  
	  // Attach the new subForm
	  const contentElement = this.element.querySelector('.formio-component-content') || this.element;
	  subForm.attach(contentElement);
	}
	
	// Trigger change event to notify parent form
	this.triggerChange({
	  noEmit: false
	});
  }).catch((error) => {
	console.error('Error recreating subForm:', error);
  });
} `

Thank You!

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions