L'entrée list vous permet de structurer les données des entrées enfants sous forme de tableau. La liste elle-même ne produit aucune balise (par défaut) et peut être utilisée en conjonction avec n'importe quel autre type d'entrée - y compris les groupes et les listes imbriquées.
La valeur d'une entrée de liste est un tableau où chaque élément est la valeur de l'entrée à cet index. Les sous-entrées n'ont pas besoin d'être du même type. En plus de structurer les données, les listes peuvent déterminer l'état de validation, fournir des valeurs initiales, et fournir des plugins et des configurations à tous ses enfants.
La pratique v-model de Vue est entièrement prise en charge dans FormKit avec un flux de données bidirectionnel même sur les listes et les groupes. Cependant, si votre formulaire nécessite une performance extrêmement élevée, envisagez d'utiliser le noyau pour lire/écrire au lieu de v-model.
Il existe 2 types de listes :
Les listes statiques sont le type de liste le plus simple à créer. Enveloppez n'importe quelle entrée dans un <FormKit type="list"> et ces entrées seront automatiquement définies comme valeurs de leur tableau. Les enfants immédiats des listes n'ont pas de nom (même s'il est spécifié) à la place, ils sont toujours identifiés par leur index. Dans une liste statique, cet index est stable et est basé sur l'ordre des entrées.
Les listes statiques ne doivent pas être utilisées pour itérer sur leur propre valeur. Bien qu'il soit sûr d'itérer sur d'autres données arbitraires, itérer sur la valeur de la liste elle-même provoquera un rendu récursif et des boucles infinies. Utilisez plutôt une liste dynamique.
Les listes dynamiques vous permettent d'itérer sur les valeurs de la liste pour créer et hydrater les entrées à l'intérieur de la liste. Les listes dynamiques sont utiles pour créer des structures de tableau dynamiques comme des répéteurs.
Vous pouvez modifier la structure de votre liste dynamique en ajoutant et en supprimant des éléments du tableau de valeurs. FormKit mettra automatiquement à jour la structure du formulaire sous-jacent pour correspondre à la nouvelle valeur.
Pour que les listes dynamiques puissent synchroniser vos données, vous devez utiliser items à partir de l'emplacement par défaut pour créer votre v-for et vous devez également passer l'index du v-for comme prop index à chaque élément de la liste.
Pour utiliser un répéteur préconstruit, consultez l'entrée de répéteur FormKit Pro gratuite.
Les listes (et les groupes) sont toujours conscients de l'état de validation de leurs enfants (y compris les enfants imbriqués). Vous pouvez accéder à ces données dans l'objet contexte de l'entrée (context.state.valid).
Bien qu'une liste puisse avoir des règles de validation et des erreurs d'entrée, elle n'inclut aucune fonctionnalité pour afficher par défaut les messages de validation et les erreurs. La liste n'envoie aucun HTML du tout. Si vous souhaitez afficher ces erreurs - vous pouvez ajouter le <FormKitMessages /> comme un enfant de la liste.
Une documentation supplémentaire sur le composant FormKitMessages peut être trouvée sur la page de documentation du formulaire.
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| disabled | Boolean | false | Désactive toutes les entrées de la liste. |
| dynamic | Boolean | false | Active le mode dynamique pour la liste et fournit des items dans le slot par défaut en créant un itérateur (v-for). |
| 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.. |
| Section-key | Description |
|---|---|
| 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. |