Guide
Construire des formulaires create/edit avec éditeurs de tableaux natifs, validation et collections imbriquées
Utilisez type: "collection" quand une valeur de formulaire est un tableau et que les utilisateurs doivent gérer ses éléments visuellement. Cas adaptés : Menus de navigation stockés en JSON, avec liens, groupes, toggles...
La valeur du formulaire reste toujours la source de vérité. 1. CollectionField lit la valeur courante depuis TanStack Form. 2. Si cette valeur n'est pas un tableau, elle est normalisée en []. 3. Chaque ajout, édition, s...
Cet exemple crée un petit éditeur de fonctionnalités avec ajout, édition, suppression, réordonnancement, validation par ligne et blocage du submit. const FeatureSchema = z.object( features: z.array( z.object(
Ce que cette page couvre
La source MDX originale est condensee en cartes CMS natives pour edition et republication depuis le control plane.
Utilisez type: "collection" quand une valeur de formulaire est un tableau et que les utilisateurs doivent gérer ses éléments visuellement. Cas adaptés : Menus de navigation stockés en JSON, avec liens, groupes, toggles...
La valeur du formulaire reste toujours la source de vérité. 1. CollectionField lit la valeur courante depuis TanStack Form. 2. Si cette valeur n'est pas un tableau, elle est normalisée en []. 3. Chaque ajout, édition, s...
Cet exemple crée un petit éditeur de fonctionnalités avec ajout, édition, suppression, réordonnancement, validation par ligne et blocage du submit. const FeatureSchema = z.object( features: z.array( z.object(
CollectionFieldDefinition étend la définition de champ classique avec les options d'un éditeur de tableau. | Propriété | Rôle | |---|---| | type: "collection" | Sélectionne le champ collection natif. |
Utilisez createActions quand les utilisateurs doivent créer plusieurs formes d'items dans le même tableau. const createLink = () = ( type: "link", label: "",
Les collections imbriquées sont supportées avec le composant bas niveau CollectionEditor à l'intérieur d'un formulaire d'item. C'est utile pour les groupes de menu à un niveau : la collection principale édite les items...
Notes d'implementation
Référence des props et usages du composant DataTable unifié
$ const FeatureSchema = z.object({
$ features: z.array(
$ z.object({
$ label: z.string().min(1),
$ enabled: z.boolean(),