Repeater

• Exemple de base
• Exemple de schéma
• Attributs du bouton Ajouter
• Min/max
• État vide
• Contrôles
• Contrôles personnalisés
• Définition des erreurs
• Props & Attributs
• Sections
• Accessibilité
  • Interactions au clavier

Exemple de base

L'input repeater est utilisé pour répéter des groupes d'inputs. Vous pouvez utiliser n'importe quel nombre d'inputs FormKit au sein d'un répéteur, et les répéteurs eux-mêmes peuvent être imbriqués à l'infini.

Par défaut, l'input répéteur a la capacité de déplacer, ajouter et supprimer des éléments :

Contrairement à la plupart des autres types d'input FormKit, l'input répéteur est de type list. Vous pouvez voir ci-dessus que la propriété users (la valeur de notre répéteur) est un tableau.

Exemple de schéma

Comme tous les autres inputs FormKit, le Répéteur peut être utilisé dans un formulaire écrit en schéma FormKit schema.

Attributs du bouton Ajouter

Dans l'exemple précédent, le bouton 'Ajouter des utilisateurs' est fourni par défaut, et le libellé du bouton est dérivé du label du répéteur. Nous pouvons personnaliser le libellé en utilisant la propriété add-button et en la définissant sur une string, ou la supprimer complètement en la définissant sur false. De manière similaire à la propriété submit-attrs sur les formulaires FormKit, nous pouvons fournir un objet d'attributs à appliquer au bouton avec add-attrs. Dans cet exemple, nous changeons le libellé du répéteur de Add Users à Mon libellé personnalisé en utilisant la propriété add-label :

Min/max

Comme beaucoup d'autres inputs FormKit, le répéteur est doté des propriétés min et max. Vous pouvez utiliser ces propriétés pour limiter le nombre d'éléments à ajouter ou à supprimer.

État vide

Lorsqu'un répéteur est autorisé à être vide en ayant sa propriété min définie sur 0 et sans valeurs, vous pouvez contrôler le contenu rendu dans l'état vide en utilisant le slot empty.

Contrôles

L'input répéteur est livré par défaut avec un ensemble de contrôles qui vous permettent de déplacer, ajouter et supprimer des éléments. Vous pouvez contrôler la visibilité de ces contrôles en définissant les propriétés upControl, downControl, insertControl et removeControl sur true ou false.

Contrôles personnalisés

Avec le répéteur de FormKit, vous n'êtes pas limité à nos contrôles par défaut. Vous pouvez manipuler le répéteur de la manière que vous souhaitez :

Définition des erreurs

Vous pouvez définir des erreurs sur un répéteur ou sur n'importe quel élément répétable en utilisant la notation par points. Ici, nous utilisons l'assistant setErrors, mais il existe d'autres méthodes également :

// le 2ème argument de setErrors est les erreurs au niveau de l'entrée
formNode.setErrors( null, // pas d'erreurs de formulaire,
  {
    // erreur sur le champ répéteur :
    'teamMembers': ['Il y a eu un problème avec 1 de vos membres d’équipe.']

    // erreur sur un élément répéteur spécifique :
    'teamMembers.1.email': ['emily@formkit.com fait déjà partie d’une équipe.'],
  }
)

Rappelez-vous, votre gestionnaire de soumission reçoit le node central du formulaire et peut être utilisé pour définir facilement des erreurs en profondeur. Lisez plus sur la gestion des erreurs ici. Voici un exemple d'un faux backend retournant des erreurs pour le répéteur et un enfant :

Props & Attributs

Sections

Vous pouvez cibler une section spécifique d'une entrée en utilisant la "key" de cette section, ce qui vous permet de modifier les classes de cette section, le HTML (via :sections-schema) ou le contenu (via des emplacements)). En savoir plus sur les sections ici.

Accessibilité

Tous les champs de saisie FormKit sont conçus en tenant compte des considérations d'accessibilité suivantes. Aidez-nous à améliorer continuellement l'accessibilité pour tous en signalant les problèmes d'accessibilité ici :

Interactions au clavier