Skip to main content
View as Markdown

Logique conditionnelle des formulaires

La logique conditionnelle fait réagir un formulaire à ce que le contributeur saisit : les champs apparaissent, deviennent obligatoires ou se grisent selon les valeurs d'autres champs. Trois propriétés de règle pilotent cela — visibleWhen, requiredWhen et disabledWhen — et toutes les trois partagent la même forme de condition, donc une fois que vous en apprenez une, vous les connaissez toutes les trois.

fields:
  - {
      kind: standalone,
      name: has_company,
      inputType: checkbox,
      label: I'm signing up on behalf of a company,
    }
  - kind: standalone
    name: company_name
    inputType: short-text
    label: Company name
    visibleWhen: { field: has_company, operator: eq, value: true }
    requiredWhen: { field: has_company, operator: eq, value: true }

Propriétés des règles

Propriété Effet lorsque la condition est vraie
visibleWhen Le champ (ou la section) est affiché. Lorsque faux, il est masqué et non soumis.
requiredWhen Le champ devient obligatoire. Lorsque faux, il est optionnel.
disabledWhen Le champ est désactivé (grisé, non modifiable). Lorsque faux, il est modifiable.

Chaque règle réside sur la base commune d'un champ, elle peut donc s'appliquer à tout type de champ portant une saisie. Les champs section prennent en charge visibleWhen pour afficher ou masquer un groupe libellé entier.

Conditions simples

Une condition simple compare la valeur actuelle d'un champ à une cible à l'aide d'un opérateur.

Propriété Description
field Nom du champ dont la valeur est évaluée.
operator Opérateur de comparaison (voir le tableau ci-dessous).
value Valeur à comparer. Un scalaire pour les opérateurs de comparaison ; un tableau pour l'appartenance ; omis pour empty / notEmpty.

Opérateurs de condition

Opérateur Signification
eq Égal à la valeur.
neq N'est pas égal à la valeur.
contains La chaîne/le tableau contient la valeur.
empty Le champ n'a aucune valeur (ignore value).
notEmpty Le champ a une valeur (ignore value).
gt Supérieur à la valeur.
gte Supérieur ou égal à la valeur.
lt Inférieur à la valeur.
lte Inférieur ou égal à la valeur.
in La valeur est l'un des membres du tableau.
notIn La valeur n'est aucun des membres du tableau. 
fields:
  - kind: standalone
    name: contact_method
    inputType: select
    label: Preferred contact method
    options:
      - { value: email, label: Email }
      - { value: phone, label: Phone }
  - kind: standalone
    name: phone
    inputType: phone
    label: Phone number
    visibleWhen: { field: contact_method, operator: eq, value: phone }
    requiredWhen: { field: contact_method, operator: eq, value: phone }

Conditions composées (ET / OU)

Les conditions se composent avec and / or et peuvent s'imbriquer arbitrairement. Un bloc and est vrai lorsque chaque enfant est vrai ; un bloc or est vrai lorsque n'importe quel enfant est vrai.

fields:
  - kind: standalone
    name: expedite_reason
    inputType: long-text
    label: Why does this need to be expedited?
    visibleWhen:
      and:
        - { field: priority, operator: in, value: [high, urgent] }
        - or:
            - { field: budget, operator: gte, value: 10000 }
            - { field: vip_customer, operator: eq, value: true }

Branchement d'étapes

Dans les mises en page multi-étapes, les conditions pilotent aussi le contrôle de flux. Les règles goToWhen d'une étape permettent à une condition vraie de sauter vers une étape différente plutôt que vers la suivante linéaire, et un visibleWhen au niveau de l'étape saute l'étape entière. Voir Formulaires multi-étapes pour le modèle de branchement complet.

steps:
  - id: account-type
    title: Account type
    fields: [plan]
    goToWhen:
      - when: { field: plan, operator: eq, value: enterprise }
        goTo: sales-contact
  - id: billing
    title: Billing
    fields: [card_number, billing_email]
  - id: sales-contact
    title: Talk to sales
    fields: [company, seats]

Conditions via formRef

Lorsqu'un formulaire de premier niveau est intégré dans une page via le formRef du contrôle de formulaire, toute sa logique conditionnelle l'accompagne — visibleWhen, requiredWhen, disabledWhen et le branchement d'étapes se comportent de manière identique que le formulaire soit affiché à /forms/{name} ou en ligne sur une page hôte. Définissez les conditions une fois sur le formulaire ; chaque intégration en hérite. Voir Contrôles de formulaire.

Pages associées