FormViewer

FormViewer rend un schéma produit par FormBuilder. Utilisez-le pour l’aperçu public, la saisie utilisateur ou la consultation d’un formulaire déjà publié.

Usage de base

<script setup lang="ts">
import type { FormKitSchemaDefinition } from '@formkit/core'

const schema = ref<FormKitSchemaDefinition[]>([])
const values = ref<Record<string, unknown>>({})

function submit(values: Record<string, unknown>) {
  console.log('Formulaire soumis', values)
}
</script>

<template>
  <FormViewer
    :schema="schema"
    v-model:values="values"
    locale="fr"
    @submit="submit"
  />
</template>

Charger un formulaire sauvegardé

<script setup lang="ts">
import type { FormKitSchemaDefinition } from '@formkit/core'

type StoredForm = {
  schema: FormKitSchemaDefinition[]
  values?: Record<string, unknown>
}

const route = useRoute()
const schema = ref<FormKitSchemaDefinition[]>([])
const values = ref<Record<string, unknown>>({})

const { data } = await useFetch<StoredForm>(`/api/forms/${route.params.id}`)

if (data.value) {
  schema.value = data.value.schema
  values.value = data.value.values ?? {}
}
</script>

<template>
  <FormViewer
    :schema="schema"
    v-model:values="values"
    locale="fr"
  />
</template>

Validez toujours le document côté serveur avant de le renvoyer au navigateur.

Soumission

FormViewer émet les valeurs validées. L’application décide ensuite où les envoyer.

async function submit(values: Record<string, unknown>) {
  await $fetch('/api/form-submissions', {
    method: 'POST',
    body: {
      formId: 'contact',
      values,
    },
  })
}

Si votre formulaire contient des fichiers, stockez les binaires séparément et gardez dans le JSON uniquement des identifiants ou des métadonnées validées.

Lecture seule et désactivé

<FormViewer :schema="schema" :values="values" readonly />
<FormViewer :schema="schema" :values="values" disabled />

readonly garde les valeurs lisibles. disabled bloque l’interaction et signale l’état aux technologies d’assistance.

Bonnes pratiques

• utilisez un endpoint dédié pour charger les formulaires publiés ;
• ne rendez pas un schéma non validé ;
• isolez les valeurs de prévisualisation des valeurs soumises ;
• gardez les règles métier sensibles côté serveur ;
• testez le rendu mobile avant publication.