it-swarm.com.de

Kann Drupal 8 Form #states API verwendet werden, um <Details> zu erweitern / zu reduzieren

Gegeben ein Kontrollkästchen mit zwei Optionen:

  • "Geschlossen" (standardmäßig ausgewählt)
  • "Öffnen"

Ich möchte den <details> - Container eines anderen Feldes (in unserem speziellen Fall eines Adressfelds) erweitern oder reduzieren. In HTML-Begriffen bedeutet dies, dass das Attribut open HTML5 zum Tag <details> Und aria-expanded=true Zum Tag <summary> Hinzugefügt wird, wenn das Optionsfeld "Öffnen" angezeigt wird Wenn Sie auf klicken, stellen Sie sicher, dass es entfernt wird, wenn diese Radiooption nicht ausgewählt ist (dh standardmäßig auch beim Laden der Seite).

Ich habe ein paar älteresemi-verwandte Probleme und die Dokumentationsseite für Drupal 8's drupal_process_states , aber es sieht so aus, als wäre dies mit der Form #states API in Drupal 8. Die Dokumente enthalten nicht "open" in der Liste der gültigen Zustände, die auf ein Element angewendet werden können.

Die gültigen Zustände sind:

  • aktiviert
  • behindert
  • erforderlich
  • optional
  • sichtbar
  • unsichtbar
  • überprüft
  • deaktiviert
  • erweitert
  • zusammengebrochen

Man könnte meinen, dass die Optionen expanded und collapsed möglicherweise funktionieren könnten, dies scheint jedoch bei meinem folgenden Beispielcode nicht der Fall zu sein:

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'
      ],
    ],
  ];
}

Das Ersetzen des Status 'Erweitert' durch 'Offen' oben funktioniert nicht, und die inverse Logik mit dem Status 'Reduziert' funktioniert nicht:

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'
      ],
    ],
  ];
}
4
JamesWilson

Anstatt erweitert/reduziert zu verwenden, verwenden Sie open/close wie folgt:

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

Leider werde ich meine eigene Frage beantworten: expanded und collapsed Zustände funktionieren für die <details> type.

Mein Problem war ein Bedienerfehler. Ich habe das #states Array auf der Ebene des '#type' => 'container' aber der Container enthält ein Widget, das das '#type' => 'details'. Lustige Zeiten mit Form API!

Der Arbeitscode lautet:

<?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