Ajouter un formulaire à une application React existante

Installez les paquets form0 :

Code
npm install form0-react form0-core

Téléchargez le schéma de Créer un formulaire d’ouverture de dossier. Si vous avez déjà créé ce formulaire, copiez votre propre schema.json à cet emplacement.

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

Créez 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 indique à form0 si ce formulaire crée un nouvel enregistrement ou en ouvre un déjà sauvegardé, et FormRenderer l’exige. formWidth définit la largeur maximale du formulaire, qui vaut 30vw par défaut.

Affichez le formulaire sur une page. Dans une nouvelle application Vite, remplacez le contenu de src/App.jsx :

Code
import { CaseIntakeForm } from "./CaseIntakeForm"

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

Dans votre propre application, affichez <CaseIntakeForm /> sur la page où le formulaire doit se trouver.

Lancez l’application et ouvrez l’URL affichée, généralement http://localhost:5173 :

Code
npm run dev

Remplissez les champs obligatoires et cliquez sur Submit. La console du navigateur affiche l’enregistrement structuré.

Remplacez src/CaseIntakeForm.jsx par cette version, qui envoie chaque enregistrement à /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>
  )
}

Trois détails comptent ici :

• fetch ne rejette pas la promesse sur une réponse 500 : le code vérifie donc response.ok et lève une erreur.
• Le bloc catch affiche un message, puis relance l’erreur. Sans le throw, FormRenderer considère que l’enregistrement a réussi.
• Modifier key remplace le formulaire par un nouveau formulaire vide après un enregistrement réussi.

Créez server/cases-api.mjs. Cet exemple utilise seulement Node.js et 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"))

Le serveur lit le même fichier de schéma que le formulaire, de sorte que les deux appliquent les mêmes règles. Il crée un nouvel évaluateur pour chaque requête, car un appel à prepareSubmission() annule tout appel précédent encore en cours sur le même évaluateur.

Redirigez les requêtes /api vers ce serveur pendant le développement. Remplacez vite.config.js par :

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

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

Lancez l’API dans un deuxième terminal, depuis la racine du projet :

Code
node server/cases-api.mjs

Elle affiche Cases API listening on port 3001.