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 filtrée de l'entrée.

attrs

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

fns

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

{
  // Renvoie 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,
  // Renvoie la représentation JSON d'une valeur
  json: (value: any) => String | false,
}

handlers

Un petit objet de gestionnaires d'entrée courants à 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 state.blurred à true
  blur: () => void,
  // définit la valeur 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 sauf si la prop id est définie.

label

Le label de l'entrée fourni 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 central. 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',
    // Détails supplémentaires sur le message, vous pouvez mettre n'importe quoi ici.
    // Ci-dessous se trouvent les détails meta pour les messages de validation :
    meta: {
      // Le nom du message de validation (utilisé dans les recherches de messages)
      messageKey: 'required',
      // Arguments pouvant ê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: "L'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 cela est faux, il n'est jamais affiché à
    // les utilisateurs.
    visible: true
  }
}

node

Le nœud central sous-jacent 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 prop options, il s'agit d'un tableau normalisé d'objets d'options.

option

Pour les entrées qui acceptent une prop options, cet objet est disponible pour les clés de section qui se trouvent à l'intérieur de l'itération (c'est-à-dire 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 les 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 servent ces éléments.
   */
  complete: boolean
  /**
   * La prop 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 sur l'entrée, mais une fois qu'une mutation
   * a été faite et que sale est `true`, il cesse de vérifier.
   * 
   * Alternativement, la prop dirty-behavior peut être définie sur `compare`, ce qui
   * différenciera 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, sale redeviendra `false`.
   */
  dirty: boolean
  /**
   * Si l'entrée a des erreurs explicites placées sur elle, ou dans le cas d'un groupe,
   * liste, ou formulaire, ceci est vrai si des erreurs sont présentes sur les enfants.
   */
  errors: 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 rebond interne et que la
   * valeur a été validée pour le formulaire.
   */
  settled: boolean
  /**
   * Si le formulaire a été soumis.
   */
  submitted: boolean
  /**
   * Si l'entrée (ou groupe/formulaire/liste) respecte toutes les règles de validation. Dans
   * le cas des groupes, des formulaires et des 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 groupe/formulaire/liste) est en cours de validation des règles - y compris
   * les règles de validation asynchrones. Dans le cas des groupes, des formulaires et des listes, cela inclut
   * l'état de validation de tous ses enfants.
   */
  validating?: boolean
  /**
   * Si la validation-visibility 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 prop 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'avoir un texte localisé pour une utilisation sur les éléments d'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.