L'entrée répéteur est destinée à répéter des groupes d'entrées. Vous pouvez utiliser n'importe quel nombre d'entrées FormKit dans un répéteur, et les répéteurs eux-mêmes peuvent être imbriqués à l'infini.
Par défaut, l'entrée répéteur a la capacité de déplacer, d'ajouter et de supprimer des éléments :
Contrairement à la plupart des autres types d'entrées FormKit, l'entrée 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.
Comme toutes les autres entrées FormKit, le Répéteur peut être utilisé dans un formulaire écrit en schéma FormKit.
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 l'enlever complètement en la définissant sur false. De manière alternative, 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 Ajouter des utilisateurs à Mon libellé personnalisé en utilisant la propriété add-label :
Comme beaucoup d'autres entrées FormKit, le répéteur est livré avec une propriété min et max. Vous pouvez utiliser ces propriétés pour limiter le nombre d'éléments à ajouter ou à supprimer.
Lorsqu'un répéteur est autorisé à être vide en ayant sa propriété min définie sur 0 et en n'ayant aucune valeur, vous pouvez contrôler le contenu rendu dans l'état vide en utilisant le slot empty.
L'entrée répéteur est livrée par défaut avec un ensemble de contrôles qui vous permettent de déplacer, d'ajouter et de 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.
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 comme vous le souhaitez :
Vous pouvez définir des erreurs sur un répéteur ou tout élément répétable en utilisant la notation pointée. Ici, nous utilisons l'aide
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 est déjà dans une équipe.'],
}
)N'oubliez pas, votre gestionnaire de soumission est passé au node central du formulaire et peut être utilisé
pour définir commodément des erreurs en profondeur. Lisez plus sur la gestion des erreurs
ici. Voici un exemple d'un faux backend
retournant des erreurs à la fois pour le répéteur et un enfant :
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| add-label | string | null | Utilisé pour changer l'étiquette du bouton d'ajout. |
| add-attrs | object | [object Object] | Utilisé pour appliquer des attributs à l'élément du bouton d'ajout. |
| add-button | boolean | true | Condition pour savoir s'il faut afficher le bouton d'ajout. |
| up-control | boolean | true | Condition pour savoir s'il faut afficher le contrôle vers le haut. |
| down-control | boolean | true | Condition pour savoir s'il faut afficher le contrôle vers le bas. |
| insert-control | boolean | false | Condition pour savoir s'il faut afficher le contrôle d'insertion. |
| remove-control | boolean | true | Condition pour savoir s'il faut afficher le contrôle de suppression. |
| min | Number | 1 | Le nombre minimum d'enfants. |
| max | Number | null | Le nombre maximum d'enfants. |
| Afficher Universel props | |||
| config | Object | {} | Options de configuration à fournir au nœud d'entrée et à tout nœud descendant de cette entrée. |
| delay | Number | 20 | Nombre de millisecondes à attendre avant que la valeur d'une entrée ne soit déclenchée avant que le commit hook ne soit déclenché. |
| dirtyBehavior | string | touched | Détermine comment le drapeau "dirty" de cette entrée est défini. Peut être défini sur touched ou compare — touched (par défaut) est plus performant, mais ne détectera pas lorsque le formulaire correspond à nouveau à son état initial. |
| errors | Array | [] | Tableau de chaînes à afficher comme messages d'erreur sur ce champ. |
| help | String | '' | Texte pour le texte d'aide associé à l'entrée. |
| id | String | input_{n} | L'identifiant unique de l'entrée. Fournir un identifiant permet également d'accéder globalement au nœud de l'entrée. |
| ignore | Boolean | false | Empêche une entrée d'être incluse dans un parent (groupe, liste, formulaire, etc). Utile lors de l'utilisation d'entrées pour l'interface utilisateur au lieu de valeurs réelles. |
| index | Number | undefined | Permet d'insérer une entrée à l'index donné si le parent est une liste. Si la valeur de l'entrée est indéfinie, elle hérite de la valeur de cette position d'index. Si elle a une valeur, elle l'insère dans les valeurs de la liste à l'index donné. |
| label | String | '' | Texte pour l'élément label associé à l'entrée. |
| name | String | input_{n} | Le nom de l'entrée tel qu'identifié dans l'objet de données. Cela doit être unique au sein d'un groupe de champs. |
| parent | FormKitNode | contextual | Par défaut, le parent est un groupe d'enrobage, une liste ou un formulaire — mais cette propriété permet une affectation explicite du nœud parent. |
| prefix-icon | String | '' | Spécifie une icône à placer dans la section prefixIcon. |
| preserve | boolean | false | Conserve la valeur de l'entrée sur un groupe parent, une liste ou un formulaire lorsque l'entrée est démontée. |
| preserve-errors | boolean | false | Par défaut, les erreurs définies sur les entrées à l'aide de setErrors sont automatiquement effacées lors de l'entrée, en définissant cette propriété sur true, l'erreur est maintenue jusqu'à ce qu'elle soit explicitement effacée. |
| sections-schema | Object | {} | Un objet de clés de section et de valeurs partielles de schéma, où chaque partie de schéma est appliquée à la section respective. |
| suffix-icon | String | '' | Spécifie une icône à placer dans la section suffixIcon. |
| type | String | text | Le type d'entrée à afficher à partir de la bibliothèque. |
| validation | String, Array | [] | Les règles de validation à appliquer à l'entrée. |
| validation-visibility | String | blur | Détermine quand afficher les règles de validation en échec d'une entrée. Les valeurs valides sont blur, dirty et live. |
| validation-label | String | {label prop} | Détermine quelle étiquette utiliser dans les messages d'erreur de validation, par défaut, elle utilise la propriété label si elle est disponible, sinon elle utilise la propriété name. |
| validation-rules | Object | {} | Règles de validation personnalisées supplémentaires à rendre disponibles pour la propriété de validation. |
| value | Any | undefined | Initialise la valeur initiale d'une entrée et/ou de ses enfants. Non réactif. Peut initialiser des groupes entiers (formulaires) et des listes.. |
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.
| Section-key | Description |
|---|---|
| fieldset | Un élément fieldset qui agit comme l'enveloppe du répéteur. |
| legend | Un élément de légende qui rend le label. |
| items | Un élément ul qui enveloppe les éléments du répéteur. |
| item | Un élément li qui est rendu pour chaque élément de répéteur. |
| content | Un conteneur pour la section de groupe. |
| group | Ne rend pas un élément. Il structure l'emplacement par défaut en une structure de données d'objet. |
| controls | Un élément ul qui enveloppe les contrôles du répéteur. |
| controlLabel | Un élément span qui rend le label du contrôle donné. |
| up | Un élément li qui rend le contrôle vers le haut. |
| upControl | Un élément bouton qui rend le contrôle vers le haut. |
| moveUpIcon | Un élément span qui rend l'icône du upControl. |
| down | Un élément li qui rend le contrôle vers le bas. |
| downControl | Un élément bouton qui rend le contrôle vers le bas. |
| moveDownIcon | Un élément span qui rend l'icône du downControl. |
| insert | Un élément li qui rend le contrôle d'insertion. |
| insertControl | Un élément bouton qui rend le contrôle d'insertion. |
| insertIcon | Un élément span qui rend l'icône du insertControl. |
| remove | Un élément li qui rend le contrôle de suppression. |
| removeControl | Un élément bouton qui rend le contrôle de suppression. |
| removeIcon | Un élément span qui rend l'icône du removeControl. |
| Afficher Universel section keys | |
| outer | L'élément d'enrobage le plus externe. |
| wrapper | Un enrobage autour de l'étiquette et de l'entrée. |
| label | L'étiquette de l'entrée. |
| prefix | N'a pas de sortie par défaut, mais permet du contenu directement avant un élément d'entrée. |
| prefixIcon | Un élément pour afficher une icône avant la section de préfixe. |
| inner | Un enrobage autour de l'élément d'entrée réel. |
| suffix | N'a pas de sortie par défaut, mais permet du contenu directement après un élément d'entrée. |
| suffixIcon | Un élément pour afficher une icône après la section de suffixe. |
| input | L'élément d'entrée lui-même. |
| help | L'élément contenant le texte d'aide. |
| messages | Un enrobage autour de tous les messages. |
| message | L'élément (ou plusieurs éléments) contenant un message — le plus souvent des messages de validation et d'erreur. |