Datenverwaltung
Das Editor-Widget unterstützt dynamische Datenverwaltung, einschließlich Echtzeit-Updates, Validierung und benutzergesteuerte Speicheraktionen. Entwickler können das Verhalten des Editor-Widgets an die Anforderungen ihrer Anwendung hinsichtlich Datenkonsistenz und Benutzerinteraktion anpassen.
Daten automatisch bei Änderungen speichern
Das Editor-Widget kann automatisches Speichern auslösen, wenn Änderungen auftreten. Dies ist hilfreich in Szenarien, in denen regelmäßige Benutzerinteraktion nicht garantiert ist oder wenn manuelle Speicheraktionen minimiert werden sollen.
<script>
import { Editor } from "@svar-ui/svelte-editor";
</script>
<Editor {items} autoSave={true} />
Die autoSave-Property auf true gesetzt stellt sicher, dass alle Änderungen automatisch gespeichert werden, wodurch der Bedarf an expliziten Speicheraktionen des Benutzers reduziert wird.
Auto-Speichern deaktivieren und manuelle Benutzeraktion erfordern
Das Editor-Widget unterstützt das Deaktivieren des automatischen Speicherns und erfordert, dass Benutzer ihre Änderungen explizit speichern. Dies ist ideal für Workflows, bei denen eine Benutzerbestätigung oder Überprüfung vor dem Speichern erforderlich ist.
<script>
import { Editor } from "@svar-ui/svelte-editor";
</script>
<Editor {items} autoSave={false} />
autoSave auf false zu setzen verhindert das automatische Speichern und gibt Benutzern die Kontrolle darüber, wann Daten gespeichert werden.
Änderungen in Editor-Daten erkennen
Das Editor-Widget liefert detaillierte Informationen über Änderungen an den Daten. Dies ist nützlich für die Verfolgung von Änderungen, die Implementierung benutzerdefinierter Logik oder das Hervorheben nicht gespeicherter Änderungen.
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} />
Der onchange-Event-Handler liefert den Feldschlüssel, seinen aktualisierten Wert und eine Zuordnung aller nicht gespeicherten Änderungen. Dies ermöglicht eine detaillierte Nachverfolgung von Änderungen.
Benutzerinitiierte Speicheraktionen erkennen
Das Editor-Widget kann erkennen, wenn Benutzer explizit das Speichern von Daten anfordern. Dies ist nützlich für die Implementierung von Workflows, die von Benutzeraktionen abhängen, wie das Absenden von Formularen oder das Bestätigen von Änderungen.
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} />
Der onsave-Event-Handler liefert Informationen über geänderte Felder und den aktuellen Datenzustand.
Validierungsstatus von Daten erkennen
Das Editor-Widget ermöglicht die Überwachung von Validierungsergebnissen und gibt Rückmeldung darüber, ob die Daten gültig sind oder Fehler enthalten. Dies ist nützlich, um die Datenintegrität vor dem Speichern sicherzustellen.
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} />
Der onvalidation-Event-Handler liefert den aktuellen Datenzustand und Validierungsfehler. Er hilft dabei, Felder zu identifizieren, die die Validierung nicht bestehen, und stellt sicher, dass die Daten vordefinierte Anforderungen erfüllen.
Ein Feld als Pflichtfeld markieren
Das Editor-Widget ermöglicht es, bestimmte Felder als Pflichtfelder zu markieren. Dadurch wird sichergestellt, dass Benutzer diese Felder nicht leer lassen können, was eine obligatorische Dateneingabe erzwingt.
<script>
import { Editor } from "@svar-ui/svelte-editor";
const items = [
{
comp: "text",
key: "name",
required: true,
},
];
</script>
<Editor {items} />
Die required-Property auf true zu setzen macht das Feld obligatorisch. Benutzer müssen einen Wert angeben, bevor sie fortfahren können.
Validierungsregeln für Felder definieren
Das Editor-Widget unterstützt die Definition benutzerdefinierter Validierungsregeln für Felder. Dadurch wird sichergestellt, dass Benutzereingaben bestimmten Kriterien entsprechen, wie Format oder Wertebereich.
<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} />
Die validation-Property definiert eine Funktion zur Überprüfung des Feldwerts, und validationMessage gibt die Fehlermeldung an, die bei fehlgeschlagener Validierung angezeigt wird. Dies ermöglicht eine präzise Kontrolle über Eingabeanforderungen.
Verwandte Beispiele: