Перейти к основному содержимому

Работа с данными

Виджет Editor поддерживает динамическую работу с данными, включая обновление в реальном времени, валидацию и сохранение данных по инициативе пользователя. Разработчики могут настроить поведение виджета Editor в соответствии с требованиями своего приложения к согласованности данных и взаимодействию с пользователем.

Автоматическое сохранение данных при изменениях​

Виджет Editor может запускать автоматическое сохранение данных при каждом изменении. Это удобно в сценариях, где периодическое взаимодействие с пользователем не гарантировано, или когда важно минимизировать ручные действия по сохранению.

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

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

Свойство autoSave со значением true обеспечивает автоматическое сохранение всех изменений, снижая необходимость явных действий по сохранению со стороны пользователя.

Отключение автосохранения и ручное сохранение пользователем​

Виджет Editor поддерживает отключение автоматического сохранения, при котором пользователи должны явно сохранять свои изменения. Это идеально подходит для рабочих процессов, требующих подтверждения или проверки данных перед сохранением.

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

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

Установка autoSave в false отключает автоматическое сохранение, передавая пользователю контроль над тем, когда данные сохраняются.

Отслеживание изменений данных в Editor​

Виджет Editor предоставляет подробную информацию об изменениях в данных. Это полезно для отслеживания правок, реализации пользовательской логики или выделения несохранённых изменений.

interface OnChangeResult {
   key: string;
   value: any;
   update: Record<string, any>;
}
<script>
   <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} />

Обработчик события onchange предоставляет ключ поля, его обновлённое значение и карту всех несохранённых изменений. Это позволяет детально отслеживать правки.

Отслеживание действий пользователя по сохранению​

Виджет Editor может фиксировать момент, когда пользователь явно запрашивает сохранение данных. Это полезно для реализации рабочих процессов, зависящих от действий пользователя, — например, отправки форм или подтверждения изменений.

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} />

Обработчик события onsave предоставляет информацию об изменённых полях и текущем состоянии данных.

Отслеживание статуса валидации данных​

Виджет Editor позволяет отслеживать результаты валидации, сообщая о том, являются ли данные корректными или содержат ошибки. Это полезно для проверки целостности данных перед сохранением.

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} />

Обработчик события onvalidation предоставляет текущее состояние данных и ошибки валидации. Он помогает определить поля, не прошедшие валидацию, и гарантирует соответствие данных заданным требованиям.

Пометка поля как обязательного​

Виджет Editor позволяет помечать определённые поля как обязательные. Это гарантирует, что пользователи не смогут оставить такие поля пустыми, обеспечивая обязательный ввод данных.

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

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

<Editor {items} />

Установка свойства required в true делает поле обязательным. Пользователь должен указать значение перед продолжением работы.

Определение правил валидации для полей​

Виджет Editor поддерживает определение пользовательских правил валидации для полей. Это гарантирует соответствие введённых данных заданным критериям, например формату или диапазону значений.

<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} />

Свойство validation задаёт функцию для проверки значения поля, а validationMessage определяет сообщение об ошибке, отображаемое при неудачной валидации. Это обеспечивает точный контроль над требованиями к вводу.

Связанные примеры: