Skip to main content

Data handling

The Editor widget supports dynamic data handling, including real-time updates, validation, and user-driven save actions. You can customize its behavior to match your application's requirements for data consistency and user interaction.

Save data automatically​

Set autoSave to true to save all changes automatically whenever a field value changes:

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

<Editor {items} autoSave={true} />

This is helpful in scenarios where periodic user interaction isn't guaranteed, or when minimizing manual save actions is a priority. With autoSave enabled, the editor triggers onsave on every field change.

Require manual save​

Set autoSave to false to turn off automatic saving and require users to explicitly save their changes:

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

<Editor {items} autoSave={false} />

This is ideal for workflows where users need to review or confirm changes before saving. The editor triggers onsave only when the user clicks the Save button and there are actual data changes.

Detect field changes​

Use the onchange event to receive detailed information about each field change. The handler gets the field key, the new value, and a map of all unsaved changes:

interface OnChangeResult {
   key: string;
   value: any;
   update: Record<string, any>;
}
<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      { comp: "text", key: "name", label: "Name" },
      { comp: "textarea", key: "descr", label: "Description" },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   function onchange(ev: OnChangeResult) {
      console.log(`field ${ev.key} was changed to ${ev.value}`);
      console.log("all not saved changes", ev.update);
   }
</script>

<Editor {items} {onchange} />

This is useful for tracking modifications, implementing custom logic based on field values, or highlighting unsaved changes.

Detect save actions​

Use the onsave event to react when users explicitly request to save data. The handler receives a list of changed field keys and the current data snapshot:

interface OnSaveResult {
   changes: string[];
   values: Record<string, any>;
}
<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      { comp: "text", key: "name", label: "Name" },
      { comp: "textarea", key: "descr", label: "Description" },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   function onsave(ev: OnSaveResult) {
      console.log("changed values", ev.changes);
      console.log("latest data snapshot", ev.values);
   }

</script>

<Editor {items} {onsave} />

This is useful for implementing workflows that depend on user save actions, such as submitting forms or persisting records.

Detect validation results​

Use the onvalidation event to monitor validation state. The handler receives a map of field errors and the current data snapshot:

interface OnValidationResult {
   errors: {
      [key: string]: {
        errorType: "validation" | "required";
      };
   };
   values: Record<string, any>;
}
<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name",
        validation: v => (v && v.length > 5),
        validationMessage: "Name must be longer than 5 characters",
        required: true
      },
      { comp: "textarea", key: "descr", label: "Description" },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   function onvalidation(ev: OnValidationResult) {
      if (Object.keys(ev.errors).length > 0) {
        for (const key in ev.errors) {
           if (ev.errors[key].errorType === "required") {
              console.log(`"${key}" is required but missing`);
           } else if (ev.errors[key].errorType === "validation") {
              console.log(`"${key}" failed a custom validation rule`);
           }
        }
      } else {
        console.log("validation is ok");
      }

      console.log("latest data snapshot", ev.values);
   }
</script>

<Editor {items} {onvalidation} />

The handler identifies fields that fail validation — "required" for empty required fields, "validation" for custom rule failures — and provides the current data snapshot. Use it to ensure data integrity before saving.

Mark a field as required​

Set required: true on any item to make the field mandatory. The editor won't trigger onsave until the user fills it in:

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

   const items = [
      {
        comp: "text",
        key: "name",
        required: true,
      },
   ];
</script>

<Editor {items} />

Define validation rules​

The Editor widget supports defining custom validation rules for fields. This ensures that user input adheres to specific criteria, such as format or value range.

Use the validation property to attach a custom validation function to a field, and validationMessage to specify the error message the editor displays when validation fails:

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

   const items = [
      { comp: "text", key: "name", label: "Name",
        validation: val => {
          const regEx = /^[a-zA-Z]+$/;
           return val && regEx.test(val);
        },
        validationMessage: "wrong name format"
      },
   ];
</script>

<Editor {items} />

The validation function returns true when the value is valid and false otherwise. This gives you precise control over input requirements beyond the required flag.

Related samples: