web-dev-qa-db-fra.com

Peut Drupal 8 API Form #states être utilisé pour développer / réduire <détails>

Étant donné un champ de case à cocher avec deux options:

  • "Fermé" (sélectionné par défaut)
  • "Ouvert"

Je souhaite développer ou réduire le conteneur <details> d'un champ différent (dans notre cas spécifique, un champ d'adresse). En termes HTML, cela signifie ajouter l'attribut open HTML5 à la balise <details> et ajouter aria-expanded=true à la balise <summary> lorsque le bouton "Ouvrir" cliquez sur la valeur du bouton radio et assurez-vous qu'elle est supprimée lorsque cette option radio n'est pas sélectionnée (ce qui signifie également par défaut au moment du chargement de la page).

J'ai trouvé quelques ancienssemi-liés problèmes et page de documentation pour Drupal 8's drupal_process_states , mais il semble que ce ne soit pas possible avec l'API Form #states dans Drupal 8. Les documents n'incluent pas "open" dans la liste d'états valides pouvant être appliqués à un élément.

Les états valides sont:

  • activée
  • désactivée
  • obligatoire
  • optionnel
  • visible
  • invisible
  • vérifié
  • décoché
  • étendu
  • s'est effondré

On pourrait penser que les options expanded et collapsed pourraient fonctionner, mais cela ne semble pas être le cas avec mon exemple de code ci-dessous:

function mymodule_form_node_<type>_form_alter(&$form, FormStateInterface $form_state) {
  $form['field_address']['#states'] = [
    // Expand address field container when the Trigger field is 'Open'.
    'expanded' => [
      ':input[name="field_trigger"]' => [
        'value' => 'open'
      ],
    ],
  ];
}

Le remplacement de l'état "étendu" par "ouvert" dans ce qui précède ne fonctionne pas, pas plus que la logique inverse utilisant l'état "réduit":

function mymodule_form_node_<type>_form_alter(&$form, FormStateInterface $form_state) {
  $form['field_address']['#states'] = [
    // Collapse address field container when the Trigger field is 'Closed'.
    'collapsed' => [
      ':input[name="field_trigger"]' => [
        'value' => 'closed'
      ],
    ],
  ];
}
8javascriptforms
4
JamesWilson

Plutôt que d'utiliser développé/réduit utilisez ouvert/fermé comme ci-dessous:

function mymodule_form_node_<type>_form_alter(&$form, FormStateInterface $form_state) {
  $form['field_address']['#states'] = [
    // Expand address field container when the Trigger field is 'Open'.
    'open' => [
      ':input[name="field_trigger"]' => [
        'value' => 'open'
      ],
    ],
    'close' => [
      ':input[name="field_trigger"]' => [
        'value' => 'closed'
      ],
    ],
  ];
}
1
Ajay Reddy

Malheureusement, je vais répondre à ma propre question: expanded et collapsed états fonctionnent pour le <details> type.

Mon problème était une erreur d'opérateur. J'ajoutais le #states tableau au niveau du '#type' => 'container' mais le conteneur contient un widget qui contient le '#type' => 'details'. Des moments amusants avec l'API Form!

Le code de travail est le suivant:

<?php
// In mymodule.module
use \Drupal\Core\Form\FormStateInterface;

function mymodule_form_node_<type>_form_alter(&$form, FormStateInterface $form_state) {
  $form['field_address']['widget'][0]['#states'] = [
    // Expand location field when the Type is 'On-site'.
    'expanded' => [
      ':input[name="field_trigger"]' => [
        'value' => 'open'
      ],
    ],
    // Collapse location field when the Type is 'Online'.
    'collapsed' => [
      ':input[name="field_trigger"]' => [
        'value' => 'closed'
      ],
    ],
  ];

  // Load edit form with Location field either open or closed, based
  // on the value of the Trigger field.
  $form['field_address']['widget'][0]['#open'] = ($form['field_trigger']['widget']['#default_value'] == 'open') ? 1 : 0;
}
1
JamesWilson