Utiliser plusieurs FormBuilder sur la même page

FormBuilder est maintenant multi-instance grâce à la prop builder-id.

Chaque instance possède son propre :

• store Pinia ;
• historique undo/redo ;
• état de formulaire ;
• autosave ;
• clé localStorage ;
• identifiants DOM FormKit.

Exemple complet

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

type FormBuilderSchema = FormKitSchemaDefinition[]
type FormBuilderValues = Record<string, unknown>

const usersSchema = ref<FormBuilderSchema>([])
const usersValues = ref<FormBuilderValues>({})

const projectsSchema = ref<FormBuilderSchema>([])
const projectsValues = ref<FormBuilderValues>({})
</script>

<template>
  <QPage padding class="column q-gutter-xl">
    <QCard flat bordered>
      <QCardSection>
        <div class="text-h6">Formulaire utilisateurs</div>
      </QCardSection>

      <FormBuilder
        builder-id="nfz-users-form"
        v-model:schema="usersSchema"
        v-model:values="usersValues"
        height="720px"
        autosave
      />
    </QCard>

    <QCard flat bordered>
      <QCardSection>
        <div class="text-h6">Formulaire projets</div>
      </QCardSection>

      <FormBuilder
        builder-id="nfz-projects-form"
        v-model:schema="projectsSchema"
        v-model:values="projectsValues"
        height="720px"
        autosave
      />
    </QCard>
  </QPage>
</template>

Clés autosave générées

Pour builder-id="nfz-users-form", l’autosave utilise :

form-builder:nfz-users-form:state

Pour builder-id="nfz-projects-form", l’autosave utilise :

form-builder:nfz-projects-form:state

Règles importantes

1. Ne change pas le builder-id après montage

Le builder considère l’id comme un identifiant d’instance. S’il change pendant le cycle de vie du composant, les stores internes ne doivent pas être réaffectés à chaud.

Correct :

<FormBuilder :builder-id="`service-${serviceName}`" />

à condition que serviceName soit déjà chargé et stable au montage.

Mieux :

<FormBuilder v-if="serviceName" :builder-id="`service-${serviceName}`" />

2. Utilise un id métier

Privilégie :

service-users-form-builder
customer-registration-form
incident-report-form

Évite :

builder-1
builder-2
random-123

3. Un builder, une responsabilité

Si une page affiche plusieurs builders, chacun doit correspondre à un document métier distinct.

Page de test dans le layer

Le layer inclut une page de test :

/multi-instance

Elle permet de vérifier que deux builders peuvent coexister sans partager leur état.