Aggiungi un modulo a un'app React esistente

Installa i pacchetti form0:

Code
npm install form0-react form0-core

Scarica lo schema di Crea un modulo di apertura pratiche. Se hai già creato quel modulo, copia il tuo schema.json in questo percorso.

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 se questo modulo crea un nuovo record o ne apre uno salvato, e FormRenderer lo richiede. formWidth imposta la larghezza massima del modulo, che per impostazione predefinita è 30vw.

Mostra il modulo in una pagina. In una nuova applicazione Vite, sostituisci il contenuto di src/App.jsx:

Code
import { CaseIntakeForm } from "./CaseIntakeForm"

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

Nella tua applicazione, visualizza <CaseIntakeForm /> nella pagina in cui deve trovarsi il modulo.

Avvia l'applicazione e apri l'URL mostrato, di solito http://localhost:5173:

Code
npm run dev

Compila i campi obbligatori e fai clic su Submit. La console del browser mostra il record strutturato.

Sostituisci src/CaseIntakeForm.jsx con questa versione, che invia ogni record 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>
  )
}

Qui contano tre dettagli:

• fetch non rifiuta la promise con una risposta 500, quindi il codice controlla response.ok e genera un errore.
• Il blocco catch mostra un messaggio e poi rilancia l'errore. Senza il throw, FormRenderer considera riuscito il salvataggio.
• Cambiare key sostituisce il modulo con uno nuovo e vuoto dopo un salvataggio riuscito.

Crea server/cases-api.mjs. Questo esempio usa solo Node.js e 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"))

Il server legge lo stesso file di schema del modulo, quindi entrambi applicano le stesse regole. Crea un nuovo valutatore per ogni richiesta perché una chiamata a prepareSubmission() annulla qualsiasi chiamata precedente ancora in corso sullo stesso valutatore.

Inoltra le richieste /api a quel server durante lo sviluppo. Sostituisci vite.config.js con:

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

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

Avvia l'API in un secondo terminale, dalla radice del progetto:

Code
node server/cases-api.mjs

Mostra Cases API listening on port 3001.