Load values from data on element change

[craftzneko]

Prehaps this is not the best approach, but hopefully if not someone can suggest a better one. My form is simple in that it just creates a JSON object and Adds and deletes "components" to the JSON. I am trying to add a modify option. When modify is selected and the component ID from the JSON object is chosen, i need to load the data into each form element. I thought i could do this through on form change using this

const componentElement = context.panel.elements.find((element) => element.id === "action");
// Handle the 'Modify' action
if (componentElement.value === 'Modify') {
  // Check if window.formData exists and is an object
  if (typeof window.formData === 'object' && window.formData !== null) {
    // Check if there is a 'Components' array in the object
    if (Array.isArray(window.formData.Components)) {
      // Update the form elements with the corresponding values from window.formData
      onChange(context.panel.elements.map((element) => {
        // Find the component with the same ID as the element (without the "installer" prefix)
        const component = window.formData.Components.find(component => 'installer' + component.ID === element.id);
        // If the component was found, update the element value with the component value
        if (component) {
          return { ...element, value: component.value };
        } else {
          // If the component was not found, return the element unchanged
          return element;
        }
      }));
    }
  }
}

I would expect description to be filled in

Json object created

I get the error onchange is not defined

[vitPinchuk]

Hi, @craftzneko
use context.panel.onChangeElements instead onChange in 'Element Value Changed' code editor