web-dev-qa-db-ja.com

Drupal 8 Form #states APIを使用して<詳細>を展開/折りたたむことができます

2つのオプションを持つチェックボックスフィールドがあるとします。

  • 「クローズ」（デフォルトで選択されています）
  • "開いた"

別のフィールド（この例ではアドレスフィールド）の<details>コンテナを展開または折りたたみたいのですが。 HTMLの用語では、これは、「開く」ラジオボタンの値がクリックされたときに<details>タグにopen HTML5属性を追加し、aria-expanded=trueタグに<summary>を追加することを意味します。また、ラジオオプションが選択されていない場合は削除されていることを確認してください（デフォルトでは、ページの読み込み時も同様です）。

古い準関連 の問題と Drupal 8のドキュメントページdrupal_process_states の問題をいくつか見つけました、しかしこれはDrupalのフォーム#states AP​​Iでは不可能であるように見えます。ドキュメントには、要素に適用できる有効な状態のリストに「open」が含まれていません。

有効な状態は次のとおりです。

  • 有効
  • 無効
  • 必須
  • オプション
  • 見える
  • 見えない
  • チェック済み
  • 未チェック
  • 拡大した
  • 崩壊した

expandedオプションとcollapsedオプションが機能する可能性があると思うかもしれませんが、以下のサンプルコードではそうではないようです。

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

上記の「展開された」状態を「オープン」に置き換えることは機能せず、「折りたたまれた」状態を使用した逆のロジックも機能しません。

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

expanded/collapsedを使用するのではなく、以下のようにopen/closeを使用します。

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

残念ながら、私は自分の質問に答えます：expanded and collapsed statesdo work<details>タイプの場合。

私の問題はオペレーターのエラーでした。私は#states配列を'#type' => 'container'のレベルで追加していましたが、コンテナ内には'#type' => 'details'を保持するウィジェットがあります。 Form APIで楽しい時間を！

作業コードはこれです：

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