Objet contexte

_value

Les entrées FormKit ont deux valeurs — la valeur validée (node.value) et la valeur non validée (node._value). Au repos, ces deux valeurs sont équivalentes, mais la valeur non validée est la valeur brute non temporisée de l'entrée.

attrs

Un objet contenant tous les attributs qui seront passés à l'élément d'entrée interne.

fns

Un petit objet de fonctions utilitaires qui sont utiles lors de l'écriture de schémas.

{
  // Retourne la longueur d'un objet donné
  length: (obj: Record<PropertyKey, any>) => Number,
  // Convertit une valeur en nombre
  number: (value: any) => Number,
  // Convertit une valeur en chaîne de caractères
  string: (value: any) => String,
  // Retourne la représentation JSON d'une valeur
  json: (value: any) => String | false,
}

handlers

Un petit objet de gestionnaires d'entrée communs à utiliser dans le schéma. Gardez à l'esprit que les "fonctionnalités" d'entrée peuvent remplacer ou ajouter des gestionnaires sur une base d'entrée par entrée.

{
  // définit la valeur de state.blurred à true
  blur: () => void,
  // définit la valeur de state.touched à true
  touch: () => void,
  // Définit la valeur de l'entrée
  DOMInput: (e: Event) => void
}

help

Le texte d'aide de l'entrée fourni par la prop help.

id

L'identifiant unique de l'entrée. Cette valeur est générée automatiquement à moins que la prop id ne soit définie.

label

L'étiquette de l'entrée fournie par la prop label.

messages

Un objet de messages visibles (où le type n'est pas ui — ui). La clé de cet objet est le nom du message, et la valeur est un objet de message de base. Par exemple, pour une entrée affichant un seul message de validation échoué, cet objet ressemblerait à :

{
  rule_required: {
    // Détermine si le message empêche la soumission du formulaire
    blocking: true,
    // La clé unique de ce message
    key: 'rule_required',
    // Des détails supplémentaires sur le message, vous pouvez mettre n'importe quoi ici.
    // Ci-dessous sont les détails meta pour les messages de validation :
    meta: {
      // Le nom du message de validation (utilisé dans les recherches de message)
      messageKey: 'required',
      // Arguments qui peuvent être utilisés dans la traduction i18n
      i18nArgs: [{
        node,
        name: 'email',
        args: []
      }]
    },
    // Le "type" de message — généralement le plugin qui l'a généré.
    type: 'validation',
    // La valeur du message
    value: 'Email est requis',
    // Si ce message est destiné à être affiché aux utilisateurs finaux — cela ne signifie pas
    // que le message est activement visible — cela est déterminé par les règles de
    // visibilité {type}, mais si c'est faux, il n'est jamais affiché aux
    // utilisateurs.
    visible: true
  }
}

node

Le nœud de base de l'entrée actuelle. Cet objet n'est pas réactif (dans le contexte de Vue).

options

Pour les entrées qui acceptent une propriété options, il s'agit d'un tableau normalisé d'objets d'options.

option

Pour les entrées qui acceptent une propriété options, cet objet est disponible pour les clés de section qui sont à l'intérieur de l'itération (par exemple, la clé de section label sur une entrée checkbox avec plusieurs cases à cocher). L'objet contient un label, une value, et parfois des attrs :

{
  value: 'foo',
  label: 'Foo',
  attrs: {
    disabled: true
  }
}

state

État actuel de l'entrée :

{
  /**
   * Si l'entrée a été floutée.
   */
  blurred: boolean
  /**
   * Vrai lorsque ces conditions sont remplies :
   *
   * Soit :
   * - L'entrée a des règles de validation
   * - Les règles de validation sont toutes respectées
   * - Il n'y a pas d'erreurs sur l'entrée
   * Ou :
   * - L'entrée n'a pas de règles de validation
   * - L'entrée n'a pas d'erreurs
   * - L'entrée est sale et a une valeur
   *
   * Ceci n'est pas destiné à être utilisé sur des formulaires/groupes/listes, mais plutôt sur
   * des entrées individuelles. Imaginez placer une case à cocher verte à côté de chaque entrée
   * lorsque l'utilisateur l'a correctement remplie — c'est à cela que cela sert.
   */
  complete: boolean
  /**
   * Un indicateur qui signale si le composant "propriétaire" de ce nœud a été monté
   * dans le DOM ou non. Écoutez l'événement `mounted` pour être notifié lorsque cet
   * indicateur change.
   */
  didMount: boolean
  /**
   * La propriété dirty-behavior contrôle comment cet état est défini. Par défaut, il est
   * considéré comme sale si une mutation a été faite à l'entrée, mais une fois qu'une mutation
   * a été faite et que dirty est `true`, il cesse de vérifier.
   * 
   * Alternativement, la propriété dirty-behavior peut être réglée sur `compare` qui va
   * comparer les changements entre la valeur actuelle et la valeur initiale après
   * chaque mutation — cela signifie que si l'entrée revient à sa valeur initiale, dirty redeviendra `false`.
   */
  dirty: boolean
  /**
   * Si l'entrée a des erreurs explicites placées sur elle, ou dans le cas d'un groupe,
   * d'une liste ou d'un formulaire, ceci est vrai si des enfants ont des erreurs sur eux.
   */
  errors: boolean
  /**
   * L'état de chargement de l'entrée ou du formulaire. Cette propriété est seulement ajoutée pendant
   * que l'entrée est en chargement et est retirée lorsque le chargement est terminé.
   */
  loading: true | undefined
  /**
   * Indique si l'entrée a la règle de validation "required".
   */
  required: boolean
  /**
   * Vrai lorsque l'entrée a des règles de validation. N'a rien à voir avec l'état
   * de ces règles de validation.
   */
  rules: boolean
  /**
   * Vrai lorsque l'entrée a terminé son cycle de debounce interne et que la
   * valeur a été validée par le formulaire.
   */
  settled: boolean
  /**
   * Si le formulaire a été soumis.
   */
  submitted: boolean
  /**
   * Si l'entrée (ou le groupe/formulaire/liste) respecte toutes les règles de validation. Dans
   * le cas des groupes, formulaires et listes, cela inclut l'état de validation de tous ses enfants.
   */
  valid: boolean
  /**
   * == Ajouté par le plugin @formkit/validation — inclus dans defaultConfig ==
   * Si l'entrée (ou le groupe/formulaire/liste) est en train de valider les règles — y compris
   * les règles de validation asynchrones. Dans le cas des groupes, formulaires et listes, cela inclut
   * l'état de validation de tous ses enfants.
   */
  validating?: boolean
  /**
   * Si la visibilité de la validation a été satisfaite et que les messages de validation
   * doivent être affichés.
   */
  validationVisible: boolean
}

type

Le type de l'entrée fournie par la propriété type. C'est la valeur qui doit être référencée lors de la recherche de définitions dans une bibliothèque d'entrées. Exemples de cette valeur : text, select ou autocomplete.

ui

Un objet de messages visibles (indexés par la key) de type ui qui peut être utilisé dans l'interface. Cela permet d'utiliser du texte localisé pour les éléments de l'interface.

classes

Un objet Proxy pour demander des classes. Cet objet permet aux auteurs de schémas de demander n'importe quelle section et d'obtenir un nom de classe génératif. Par exemple, $classes.input retournerait (par défaut sans configuration supplémentaire) formkit-input tandis que $classes.foobar retournerait formkit-foobar.