Appeler une action de formulaire SvelteKit (ou soumettre un formulaire) à partir d'un composant

Gestion des soumissions de formulaires à partir d'un composant SvelteKit

Soumettre un formulaire à partir d'un composant SvelteKit pour qu'il soit géré par une action de formulaire côté serveur est plus simple que vous ne le pensez. Vous n’avez pas besoin que le formulaire se trouve dans une page. Il peut vivre dans n’importe quel composant tout en continuant à interagir avec les fonctionnalités côté serveur de SvelteKit.

Cet article vous guidera dans la soumission d'un formulaire à partir d'un composant, son traitement à l'aide d'une action de formulaire par défaut à partir d'un +page.server.js et la configuration d'un +page.svelte pour lier le formulaire.

Structure du projet
mon-projet-sveltekit/
├──src/
│ ├── composants/
│ │ └── FormTestComponent.svelte
│ ├── itinéraires/
│ │ ├── +page.svelte
│ │ └── test/
│ │ └── +page.server.js
├── statique/
├── package.json
├── svelte.config.js
├── vite.config.js
└── tsconfig.json

---

1. Créez le FormTestComponent et ajoutez un formulaire

Tout d’abord, créons un FormTestComponent qui contient un formulaire simple :

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

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

• Le composant FormInput est un champ de saisie personnalisé utilisé ici pour le formulaire.
• {form} est un raccourci pour form={form}, qui lie l'objet formulaire transmis de la page à ce composant.

À ce stade, nous disposons d'un formulaire de base prêt à être utilisé dans un composant, mais nous ne l'avons pas encore connecté à la gestion des formulaires côté serveur.

---

2. Configurez +page.svelte pour la liaison de formulaire

Maintenant, créez un fichier +page.svelte pour utiliser le FormTestComponent et liez son accessoire de formulaire.

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

Points clés :

• export let form; : L'objet formulaire provient de la réponse à l'action du formulaire sur le serveur et est transmis à FormTestComponent. Cela lie les données de réponse du formulaire à l'accessoire de formulaire dans le composant.
• Réactivité : au fur et à mesure que le formulaire est soumis et mis à jour sur le serveur, l'objet du formulaire reflétera ces modifications côté client, gardant tout synchronisé.

---

3. Amélioration de la soumission du formulaire dans FormTestComponent

Pour gérer efficacement les soumissions de formulaires, SvelteKit fournit la directive use:enhance, qui vous permet d'améliorer le formulaire avec des fonctionnalités d'amélioration progressive telles que la gestion des soumissions sans rechargement complet de la page.

Voici comment améliorer la soumission du formulaire dans 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>

Points clés :

• use:enhance : Cette directive améliore le formulaire pour gérer les soumissions sans rechargement complet. Cela facilite également la gestion des erreurs ou des mises à jour partielles du formulaire côté client.
• on:submit|preventDefault : cela empêche le comportement de soumission de formulaire par défaut du navigateur (un rechargement de page), permettant à SvelteKit de le gérer.
• action="/test" : Le formulaire pointe vers la route /test, que nous allons créer prochainement. Si nous utilisions une action nommée (comme l'inscription), l'URL ressemblerait à /test?/signup.

---

4. Création de l'action côté serveur

Pour traiter le formulaire sur le serveur, créez un répertoire dans /test avec un +page.server.js (ou +page.server.ts si vous préférez TypeScript).

Voici un exemple de ce à quoi pourrait ressembler l'action du formulaire dans +page.server.js :

// - /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!!"
        };
    }
};

Points clés :

• request.formData() : Cette méthode récupère les données du formulaire soumises à partir de la requête.
• Object.fromEntries(data.entries()) : Ceci convertit les données du formulaire en un format d'objet plus utilisable, où chaque nom de champ de formulaire devient une clé et sa valeur est la valeur correspondante.

C'est ici que le serveur traite le formulaire. Dans ce cas, nous enregistrons les données du formulaire et renvoyons un message de réussite. Dans un scénario réel, vous effectueriez probablement une validation et géreriez les erreurs.

---

5. Voir la réponse du formulaire

Une fois le formulaire soumis, vous verrez les données du formulaire enregistrées à la fois dans le terminal (côté serveur) et dans la console du navigateur (côté client). C'est grâce au console.log(form) dans le composant et au console.log(formEntries) dans le +page.server.js, qui enregistre respectivement la réponse du formulaire et le formulaire.

---

Conclusion

Vous avez maintenant créé avec succès un formulaire dans un composant SvelteKit qui soumet des données à une action de formulaire côté serveur. Vous n'avez pas besoin d'utiliser une page complète pour le formulaire et vous avez utilisé l'utilisation de SvelteKit : améliorer pour gérer les soumissions de manière transparente sans recharger la page.

Vous pouvez étendre cela en ajoutant une validation personnalisée, en gérant les erreurs ou même en effectuant des actions plus complexes comme le téléchargement de fichiers.

---

Bon piratage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!