Skip to main content

onchange

Description​

Fires when a change occurs in any field of the editor

Usage​

onchange?: (ev: {
   key: string;
   value: any;
   update: { [key: string]: any };
   input?: boolean;
}) => void;

Parameters​

The onchange event callback receives a single argument ev with the following properties:

  • key – (required) the key of the field that triggered the change
  • value – (required) the new value of the changed field
  • update – (required) map of current changed values (unsaved changes)
  • input - (optional) true, if a value is being typed

Examples​

Detecting changes in editor fields​

<script>
  import { Editor } from "@svar-ui/svelte-editor";
  import { getData } from "../data";
  
  const { items, values } = getData();
  
  function onchange(ev){
   console.log(`field ${ev.key} was changed to ${ev.value}`);
   console.log("all not saved changes", ev.update);
  }
</script>

<Editor {items} {values} {onchange} />

Modifying form data based on field change​

In some cases, changing a field may require updating form data. You can handle this by updating the ev.update object inside the onchange event handler. If you set ev.update during this event, it will override the default update behavior and apply your custom values instead.

<script>
   import { Editor } from "@svar-ui/svelte-editor";
   import { getData } from "../data";

   const { items, values } = getData();

   function onchange(ev) {
      ev.update = {
        // modified form data
      };
   }
</script>

<Editor {items} {values} {onchange} />

Related articles:registerEditorItem