Construa formulários com rotas de API

Um formulário HTML faz com que o navegador atualize a página ou navegue para uma nova. Ao invés disso, para enviar dados de formulário para um endpoint de API, você deve interceptar o envio do formulário usando JavaScript.

Esta receita mostra como enviar dados de formulário para um endpoint de API e lidar com esses dados.

Pré-requisitos

Seção intitulada Pré-requisitos

• Um projeto com SSR (output: 'server') habilitado
• Uma integração de Framework de UI instalada

Receita

Seção intitulada Receita

1. Crie um componente de formulário usando seu framework de UI. Cada input deve ter um atributo name que descreve o valor daquele input.

   Tenha certeza de incluir um elemento <button> ou <input type="submit"> para enviar o formulário.

   Preact

   src/components/FeedbackForm.tsx

   export default function Formulario() {
     return (
       <form>
         <label>
           Nome
           <input type="text" id="nome" name="nome" required />
         </label>
         <label>
           Email
           <input type="email" id="email" name="email" required />
         </label>
         <label>
           Mensagem
           <textarea id="mensagem" name="mensagem" required />
         </label>
         <button>Enviar</button>
       </form>
     );
   }

   React

   src/components/FeedbackForm.tsx

   export default function Formulario() {
     return (
       <form>
         <label>
           Nome
           <input type="text" id="nome" name="nome" required />
         </label>
         <label>
           Email
           <input type="email" id="email" name="email" required />
         </label>
         <label>
           Mensagem
           <textarea id="mensagem" name="mensagem" required />
         </label>
         <button>Enviar</button>
       </form>
     );
   }

   Solid

   src/components/FeedbackForm.tsx

   export default function Formulario() {
     return (
       <form>
         <label>
           Nome
           <input type="text" id="nome" name="nome" required />
         </label>
         <label>
           Email
           <input type="email" id="email" name="email" required />
         </label>
         <label>
           Mensagem
           <textarea id="mensagem" name="mensagem" required />
         </label>
         <button>Enviar</button>
       </form>
     );
   }

   Svelte

   src/components/FeedbackForm.svelte

    <form>
       <label>
         Nome
         <input type="text" id="nome" name="nome" required />
       </label>
       <label>
         Email
         <input type="email" id="email" name="email" required />
       </label>
       <label>
         Mensagem
         <textarea id="mensagem" name="mensagem" required />
       </label>
       <button>Enviar</button>
     </form>

   Vue

   src/components/FeedbackForm.vue

   <template>
     <form>
       <label>
         Nome
         <input type="text" id="nome" name="nome" required />
       </label>
       <label>
         Email
         <input type="email" id="email" name="email" required />
       </label>
       <label>
         Mensagem
         <textarea id="mensagem" name="mensagem" required />
       </label>
       <button>Enviar</button>
     </form>
   </template>

2. Crie um endpoint de API POST que receberá os dados do formulário. Use request.formData() para processá-lo. Tenha certeza de validar os valores do formulário antes de usá-los.

   Esse exemplo envia um objeto JSON com uma mensagem de volta para o cliente.

   src/pages/api/feedback.ts

   import type { APIRoute } from "astro";
   
   export const post: APIRoute = async ({ request }) => {
     const dados = await request.formData();
     const nome = dados.get("nome");
     const email = dados.get("email");
     const mensagem = dados.get("mensagem");
     // Valide os dados - você provavelmente vai querer fazer mais do que isso
     if (!nome || !email || !mensagem) {
       return new Response(
         JSON.stringify({
           message: "Preencha todos os campos obrigatórios",
         }),
         { status: 400 }
       );
     }
     // Faça algo com os dados, e então retorne uma resposta de sucesso
     return new Response(
       JSON.stringify({
         message: "Sucesso!"
       }),
       { status: 200 }
     );
   };

3. Crie uma função que aceita um evento submit, então passe-a como um manipulador de evento submit para o seu formulário. Na função, chame preventDefault no evento para sobrepor o processo de envio padrão do navegador.

   Então, crie um objeto FormData e envie-o para seu endpoint usando fetch.

   Preact

   src/components/FeedbackForm.tsx

   import { useState } from "preact/hooks";
   
   export default function Formulario() {
     const [respostaMensagem, setRespostaMensagem] = useState("");
   
     async function submit(e: SubmitEvent) {
       e.preventDefault();
       const formData = new FormData(e.target as HTMLFormElement);
       const resposta = await fetch("/api/feedback", {
         method: "POST",
         body: formData,
       });
       const dados = await resposta.json();
       if (data.mensagem) {
         setRespostaMensagem(data.mensagem);
       }
     }
   
     return (
       <form onSubmit={submit}>
         <label>
           Nome
           <input type="text" id="nome" name="nome" required />
         </label>
         <label>
           Email
           <input type="email" id="email" name="email" required />
         </label>
         <label>
           Mensagem
           <textarea id="mensagem" name="mensagem" required />
         </label>
         <button>Enviar</button>
         {respostaMensagem && <p>{respostaMensagem}</p>}
       </form>
     );
   }

   React

   src/components/FeedbackForm.tsx

   import { useState } from "react";
   
   export default function Formulario() {
     const [respostaMensagem, setRespostaMensagem] = useState("");
   
     async function submit(e: SubmitEvent) {
       e.preventDefault();
       const formData = new FormData(e.target as HTMLFormElement);
       const resposta = await fetch("/api/feedback", {
         method: "POST",
         body: formData,
       });
       const dados = await resposta.json();
       if (dados.mensagem) {
         setRespostaMensagem(dados.mensagem);
       }
     }
   
     return (
       <form onSubmit={submit}>
         <label>
           Nome
           <input type="text" id="nome" name="nome" required />
         </label>
         <label>
           Email
           <input type="email" id="email" name="email" required />
         </label>
         <label>
           Mensagem
           <textarea id="mensagem" name="mensagem" required />
         </label>
         <button>Enviar</button>
         {respostaMensagem && <p>{respostaMensagem}</p>}
       </form>
     );
   }

   Solid

   src/components/FeedbackForm.tsx

   import { createSignal, createResource, Suspense } from "solid-js";
   
   async function postFormData(formData: FormData) {
     const resposta = await fetch("/api/feedback", {
       method: "POST",
       body: formData,
     });
     const dados = await resposta.json();
     return dados;
   }
   
   export default function Form() {
     const [formData, setFormData] = createSignal<FormData>();
     const [resposta] = createResource(formData, postFormData);
   
     function submit(e: SubmitEvent) {
       e.preventDefault();
       setFormData(new FormData(e.target as HTMLFormElement));
     }
   
     return (
       <form onSubmit={submit}>
         <label>
           Nome
           <input type="text" id="nome" name="nome" required />
         </label>
         <label>
           Email
           <input type="email" id="email" name="email" required />
         </label>
         <label>
           Mensagem
           <textarea id="mensagem" name="mensagem" required />
         </label>
         <button>Enviar</button>
         <Suspense>{response() && <p>{response().mensagem}</p>}</Suspense>
       </form>
     );
   }

   Svelte

   src/components/FeedbackForm.svelte

   <script lang="ts">
     let respostaMensagem: string;
   
     async function submit(e: SubmitEvent) {
       e.preventDefault();
       const formData = new FormData(e.currentTarget as HTMLFormElement);
       const resposta = await fetch("/api/feedback", {
         method: "POST",
         body: formData,
       });
       const dados = await resposta.json();
       respostaMensagem = dados.mensagem;
     }
   </script>
   
   <form on:submit={submit}>
     <label>
       Nome
       <input type="text" id="nome" name="nome" required />
     </label>
     <label>
       Email
       <input type="email" id="email" name="email" required />
     </label>
     <label>
       Mensagem
       <textarea id="mensagem" name="mensagem" required />
     </label>
     <button>Enviar</button>
     {#if respostaMensagem}
       <p>{respostaMensagem}</p>
     {/if}
   </form>

   Vue

   src/components/FeedbackForm.vue

   <script setup lang="ts">
   import { ref } from "vue";
   
   const respostaMensagem = ref<string>();
   
   async function submit(e: Event) {
     e.preventDefault();
     const formData = new FormData(e.currentTarget as HTMLFormElement);
     const resposta = await fetch("/api/feedback", {
       method: "POST",
       body: formData,
     });
     const dados = await resposta.json();
     respostaMensagem.value = dados.mensagem;
   }
   </script>
   <template>
     <form @submit="submit">
       <label>
         Nome
         <input type="text" id="nome" name="nome" required />
       </label>
       <label>
         Email
         <input type="email" id="email" name="email" required />
       </label>
       <label>
         Mensagem
         <textarea id="mensagem" name="mensagem" required />
       </label>
       <button>Enviar</button>
       <p v-if="respostaMensagem">{{ respostaMensagem }}</p>
     </form>
   </template>