Añade un formulario a una aplicación React existente

Instala los paquetes de form0:

Code
npm install form0-react form0-core

Descarga el esquema de Crea un formulario de registro de casos. Si ya creaste ese formulario, copia tu propio schema.json a esta ruta.

Code
mkdir -p src/forms
curl -o src/forms/case-intake.form0.json https://docs.form0.dev/guides/assets/case-intake-form/case-intake.form0.json

Crea src/CaseIntakeForm.jsx:

Code
import { FormRenderer } from "form0-react"
import "form0-react/index.css"
import schema from "./forms/case-intake.form0.json"

export function CaseIntakeForm() {
  return (
    <FormRenderer
      engineOptions={{ events: { recordKind: "new" } }}
      formWidth="100%"
      schema={schema}
      onSubmit={(record) => console.log(record)}
    />
  )
}

recordKind indica a form0 si este formulario crea un registro nuevo o abre uno guardado, y FormRenderer lo requiere. formWidth establece el ancho máximo del formulario, que es 30vw por defecto.

Muestra el formulario en una página. En una aplicación Vite nueva, sustituye el contenido de src/App.jsx:

Code
import { CaseIntakeForm } from "./CaseIntakeForm"

export default function App() {
  return <CaseIntakeForm />
}

En tu propia aplicación, renderiza <CaseIntakeForm /> en la página donde deba ir el formulario.

Inicia la aplicación y abre la URL que muestra, normalmente http://localhost:5173:

Code
npm run dev

Rellena los campos obligatorios y haz clic en Submit. La consola del navegador muestra el registro estructurado.

Sustituye src/CaseIntakeForm.jsx por esta versión, que envía cada registro a /api/cases:

Code
import { useState } from "react"
import { FormRenderer } from "form0-react"
import "form0-react/index.css"
import schema from "./forms/case-intake.form0.json"

export function CaseIntakeForm() {
  const [formKey, setFormKey] = useState(0)
  const [sending, setSending] = useState(false)
  const [message, setMessage] = useState(null)

  async function sendCase(record) {
    setSending(true)
    setMessage(null)

    try {
      const response = await fetch("/api/cases", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(record),
      })

      if (!response.ok) throw new Error(`The server answered ${response.status}`)

      setMessage("Case saved.")
      setFormKey((key) => key + 1)
    } catch (error) {
      setMessage("The case was not saved. Try again.")
      throw error
    } finally {
      setSending(false)
    }
  }

  return (
    <main>
      {message && <p role="status">{message}</p>}
      <FormRenderer
        key={formKey}
        engineOptions={{ events: { recordKind: "new" } }}
        formWidth="100%"
        schema={schema}
        submitBlockedReason={sending ? "Sending the case" : undefined}
        onSubmit={sendCase}
      />
    </main>
  )
}

Aquí importan tres detalles:

• fetch no rechaza la promesa ante una respuesta 500, así que el código comprueba response.ok y lanza un error.
• El bloque catch muestra un mensaje y después vuelve a lanzar el error. Sin el throw, FormRenderer considera que el guardado ha salido bien.
• Al cambiar key, un formulario nuevo y vacío sustituye al anterior después de un guardado correcto.

Crea server/cases-api.mjs. Este ejemplo solo usa Node.js y form0-core:

Code
import { readFileSync } from "node:fs"
import { createServer } from "node:http"
import {
  buildFormRecordSnapshot,
  createRecordEvaluator,
  createStructuredRecord,
  flattenFields,
} from "form0-core"

const schema = JSON.parse(readFileSync("src/forms/case-intake.form0.json", "utf8"))
const fields = flattenFields(schema.form.elements)

async function checkRecord(record) {
  const { raw_values, repeatable } = buildFormRecordSnapshot(schema, record)
  const result = await createRecordEvaluator({ schema }).prepareSubmission(
    {
      values: raw_values,
      repeatable,
    },
    { validateHiddenValues: true },
  )

  if (!result.eligible) {
    return {
      issues: result.validationSummary.orderedIssues.map(({ fieldName, message }) => ({
        fieldName,
        message,
      })),
    }
  }

  const checkedRecord = createStructuredRecord(result.snapshot, fields, {
    originalElements: schema.form.elements,
  })
  return { checkedRecord }
}

function reply(response, status, body) {
  response.writeHead(status, { "Content-Type": "application/json" })
  response.end(JSON.stringify(body))
}

createServer(async (request, response) => {
  if (request.method !== "POST" || request.url !== "/api/cases") {
    return reply(response, 404, { error: "Not found" })
  }

  try {
    let body = ""
    for await (const chunk of request) body += chunk

    const { checkedRecord, issues } = await checkRecord(JSON.parse(body))
    if (issues) return reply(response, 422, { issues })

    console.log("Saved case:", checkedRecord.form_values)
    reply(response, 201, { saved: true })
  } catch (error) {
    console.error(error)
    reply(response, 400, { error: "The record could not be read." })
  }
}).listen(3001, () => console.log("Cases API listening on port 3001"))

El servidor lee el mismo archivo de esquema que el formulario, así que ambos aplican las mismas reglas. Crea un evaluador nuevo para cada petición porque una llamada a prepareSubmission() cancela cualquier llamada anterior que siga en curso en el mismo evaluador.

Reenvía las peticiones de /api a ese servidor durante el desarrollo. Sustituye vite.config.js por:

Code
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: { "/api": "http://localhost:3001" },
  },
})

Inicia la API en un segundo terminal, desde la raíz del proyecto:

Code
node server/cases-api.mjs

Muestra Cases API listening on port 3001.