從元件呼叫 SvelteKit 表單操作（或提交表單）

處理來自 SvelteKit 元件的表單提交

從 SvelteKit 元件提交表單以由伺服器端表單操作處理比您想像的要簡單。您不需要將表單放在頁面內。它可以存在於任何元件中，並且仍然與 SvelteKit 的伺服器端功能互動。

這篇文章將引導您完成從元件提交表單、使用 +page.server.js 中的預設表單操作處理表單，以及設定 +page.svelte 來綁定表單。

專案結構
我的-sveltekit-專案/
├── src/
│ ├── 組件/
│ │ └── FormTestComponent.svelte
│ ├── 路線/
│ │ ├── +page.svelte
│ │ └── 檢定/
│ │ └── +page.server.js
├── 靜態/
├── package.json
├── svelte.config.js
├── vite.config.js
└── tsconfig.json

---

1. 建立FormTestComponent並新增表單

首先，讓我們建立一個包含簡單表單的 FormTestComponent：

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

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

• FormInput 元件是此處用於表單的自訂輸入欄位。
• {form} 是 form={form} 的簡寫，它綁定從頁面傳遞到此元件的表單物件。

此時，我們已經有了一個可以在元件內使用的基本表單，但我們尚未將其連接到伺服器端表單處理。

---

2. 設定 +page.svelte 進行表單綁定

現在，建立一個 +page.svelte 檔案來使用 FormTestComponent 並綁定其 form 屬性。

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

要點：

• export let form;：表單物件來自伺服器上的表單操作回應，並向下傳遞給 FormTestComponent。這會將表單回應資料綁定到元件中的表單道具。
• 反應性：當表單在伺服器上提交和更新時，表單物件將在客戶端反映這些更改，使所有內容保持同步。

---

3. 增強FormTestComponent中的表單提交

為了有效地處理表單提交，SvelteKit 提供了 use:enhance 指令，它允許您透過漸進式增強功能來增強表單，例如在不重新載入整個頁面的情況下處理提交。

以下是如何在 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>

要點：

• use:enhance：此指令增強了表單以處理提交而無需完全重新載入。它還可以輕鬆處理客戶端的錯誤或部分錶單更新。
• on:submit|preventDefault：這會阻止瀏覽器的預設表單提交行為（頁面重新載入），從而允許 SvelteKit 處理它。
• action="/test"：表單指向 /test 路由，我們很快就會建立它。如果我們使用命名操作（例如註冊），則 URL 將類似於 /test?/signup。

---

4. 建立伺服器端操作

要在伺服器上處理表單，請在 /test 處使用 +page.server.js（如果您喜歡 TypeScript，則使用 +page.server.ts）建立目錄。

以下是 +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!!"
        };
    }
};

要點：

• request.formData()：此方法從請求中擷取提交的表單資料。
• Object.fromEntries(data.entries())：這會將表單資料轉換為更可用的物件格式，其中每個表單欄位名稱成為鍵，其值是對應的值。

這是伺服器處理表單的地方。在本例中，我們將記錄表單資料並傳回成功訊息。在現實場景中，您可能會執行驗證並處理任何錯誤。

---

5.查看表單回應

提交表單後，您將看到終端機（伺服器端）和瀏覽器控制台（客戶端）中記錄的表單資料。這要歸功於元件中的console.log(form)和+page.server.js中的console.log(formEntries)，它們分別記錄表單回應和表單。

---

結論

現在您已經在 SvelteKit 元件內成功建立了一個表單，該元件將資料提交到伺服器端表單作業。您不需要使用完整的表單頁面，並且您已經利用了 SvelteKit 的 use:enhance 來無縫處理提交，而無需重新加載頁面。

您可以透過新增自訂驗證、處理錯誤，甚至執行更複雜的操作（例如檔案上傳）來擴充此功能。

---

駭客快樂！

以上是從元件呼叫 SvelteKit 表單操作（或提交表單）的詳細內容。更多資訊請關注PHP中文網其他相關文章！