Aufrufen einer SvelteKit-Formularaktion (oder Senden eines Formulars) von einer Komponente aus

Umgang mit Formularübermittlungen von einer SvelteKit-Komponente

Das Senden eines Formulars aus einer SvelteKit-Komponente zur Verarbeitung durch eine serverseitige Formularaktion ist einfacher, als Sie vielleicht denken. Das Formular muss sich nicht innerhalb einer Seite befinden. Es kann in jeder Komponente vorhanden sein und dennoch mit der serverseitigen Funktionalität von SvelteKit interagieren.

In diesem Beitrag erfahren Sie, wie Sie ein Formular über eine Komponente senden, es mit einer Standardformularaktion von +page.server.js verarbeiten und eine +page.svelte einrichten, um das Formular zu binden.

Projektstruktur
my-sveltekit-project/
├── src/
│ ├── Komponenten/
│ │ └── FormTestComponent.svelte
│ ├── Routen/
│ │ ├── +page.svelte
│ │ └── Test/
│ │ └── +page.server.js
├── statisch/
├── package.json
├── svelte.config.js
├── vite.config.js
└── tsconfig.json

1. Erstellen Sie die FormTestComponent und fügen Sie ein Formular hinzu

Erstellen wir zunächst eine FormTestComponent, die ein einfaches Formular enthält:

<!-- src/lib/components/FormTestComponent.svelte -->
<script>
  export let form;
</script>

<form>
  <input id="test" name="test" />
  <button type="submit"> Submit </button>
</form>

• Die FormInput-Komponente ist ein benutzerdefiniertes Eingabefeld, das hier für das Formular verwendet wird.
• {form} ist eine Abkürzung für form={form}, die das von der Seite übergebene Formularobjekt an diese Komponente bindet.

Zu diesem Zeitpunkt haben wir ein Basisformular zur Verwendung in einer Komponente bereit, aber wir haben es noch nicht mit der serverseitigen Formularverarbeitung verbunden.

2. Richten Sie +page.svelte für die Formularbindung ein

Erstellen Sie nun eine +page.svelte-Datei, um die FormTestComponent zu verwenden und ihre Formularstütze zu binden.

<!-- routes/+page.svelte -->
<script>
  import FormTestComponent from "$lib/components/FormTestComponent.svelte";
  export let form; // This comes from the page’s server-side form response
</script>

<FormTestComponent {form} />

Wichtige Punkte:

• let-Formular exportieren;: Das Formularobjekt stammt aus der Formularaktionsantwort auf dem Server und wird an FormTestComponent weitergegeben. Dadurch werden die Formularantwortdaten an die Formularstütze in der Komponente gebunden.
• Reaktivität: Während das Formular auf dem Server übermittelt und aktualisiert wird, spiegelt das Formularobjekt diese Änderungen clientseitig wider und hält alles synchron.

3. Verbesserung der Formularübermittlung in FormTestComponent

Um Formularübermittlungen effizient zu bearbeiten, bietet SvelteKit die use:enhance-Direktive, mit der Sie das Formular mit progressiven Erweiterungsfunktionen erweitern können, z. B. die Bearbeitung von Formularübermittlungen ohne ein vollständiges Neuladen der Seite.

So verbessern Sie die Formularübermittlung in FormTestComponent:

<!-- src/lib/components/FormTestComponent.svelte -->
<script>
  import { enhance } from "$app/forms";
  import FormInput from "$components/forms/FormInput.svelte";
  import { page } from "$app/stores";

  let loading = false;
  export let form;
  $: console.log(form); // Log form response for debugging
</script>

<form
  method="POST"
  on:submit|preventDefault
  action="/test"
  use:enhance
>
  <FormInput label="test" id="test" />
  <button type="submit"> Submit </button>
</form>

Wichtige Punkte:

• use:enhance: Diese Direktive erweitert das Formular, um Einreichungen ohne vollständiges Neuladen zu verarbeiten. Es erleichtert außerdem die Handhabung von Fehlern oder teilweisen Formularaktualisierungen auf der Clientseite.
• on:submit|preventDefault: Dies verhindert das standardmäßige Formularübermittlungsverhalten des Browsers (ein Neuladen der Seite) und ermöglicht es SvelteKit, damit umzugehen.
• action="/test": Das Formular verweist auf die /test-Route, die wir bald erstellen werden. Wenn wir eine benannte Aktion (z. B. Anmeldung) verwenden würden, würde die URL wie folgt aussehen: /test?/signup.

4. Erstellen der serverseitigen Aktion

Um das Formular auf dem Server zu verarbeiten, erstellen Sie ein Verzeichnis unter /test mit +page.server.js (oder +page.server.ts, wenn Sie TypeScript bevorzugen).

Hier ist ein Beispiel dafür, wie die Formularaktion in +page.server.js aussehen könnte:

// - /routes/test/+page.server.js
/** @type {import('./$types').Actions} */
export const actions = {
    default: async ({ request }) => {
        const data = await request.formData();
        const formEntries = Object.fromEntries(data.entries()); // Convert form data to an object
        console.log(formEntries); // Log form data on the server
        return {
            success: true,
            message: "Yay!!"
        };
    }
};

Wichtige Punkte:

• request.formData(): Diese Methode ruft die übermittelten Formulardaten aus der Anfrage ab.
• Object.fromEntries(data.entries()): Dadurch werden die Formulardaten in ein besser verwendbares Objektformat konvertiert, in dem jeder Formularfeldname zu einem Schlüssel wird und sein Wert der entsprechende Wert ist.

Hier verarbeitet der Server das Formular. In diesem Fall protokollieren wir die Formulardaten und geben eine Erfolgsmeldung zurück. In einem realen Szenario würden Sie wahrscheinlich eine Validierung durchführen und etwaige Fehler beheben.

5. Sehen Sie sich die Formularantwort an

Sobald das Formular übermittelt wurde, werden die Formulardaten sowohl im Terminal (serverseitig) als auch in der Browserkonsole (clientseitig) protokolliert angezeigt. Dies ist dem console.log(form) in der Komponente und dem console.log(formEntries) in der +page.server.js zu verdanken, die die Formularantwort bzw. das Formular protokollieren.

Abschluss

Jetzt haben Sie erfolgreich ein Formular innerhalb einer SvelteKit-Komponente erstellt, das Daten an eine serverseitige Formularaktion übermittelt. Sie mussten für das Formular keine ganze Seite verwenden und haben use:enhance von SvelteKit genutzt, um Einreichungen nahtlos zu verarbeiten, ohne dass die Seite neu geladen werden muss.

Sie können dies erweitern, indem Sie eine benutzerdefinierte Validierung hinzufügen, Fehler behandeln oder sogar komplexere Aktionen wie Datei-Uploads durchführen.

Viel Spaß beim Hacken!

Das obige ist der detaillierte Inhalt vonAufrufen einer SvelteKit-Formularaktion (oder Senden eines Formulars) von einer Komponente aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!