2017.11.28

Form API #states の利用方法

#フォーム

DrupalのForm APIで #statesというプロパティがありそれについてのご紹介をしたいと思います。

#statesプロパティとは

例えば、チェックボックスの選択状態によって、特定のテキストボックスの表示/非表示を切り替える場合
通常であればJavaScriptを実装すると思います。
Drupalの場合Form API の #states プロパティに表示/非表示の条件を書くことにより、DrupalがJavaScriptを生成し、JSで実装した場合と変わらない機能を提供します。

既存フォームへの #states プロパティの実装例

試しにノード編集フォームへ #states プロパティを追加してみましょう。
今回は 備考有無 チェックボックスの内容によって 備考欄 テキストフィールドの表示/非表示を切り替えます。

モジュール構造

d842_form_states
├── d842_form_states.info.yml
└── d842_form_states.module

コンテンツタイプ(基本ページ)定義

基本ページコンテンツタイプに画像のように、2つのフィールドを追加します。

備考(field_remarks)
備考有無(field_remarks_flg)

form_states1

ノード編集フォーム(#states実装前)

#states 実装前は、画像のように 備考 テキストフィールドが常に表示された状態となります。

form_states2

モジュール実装

フィールドの表示/非表示を行うのは 備考欄 フィールドなので
備考欄 フィールドに対し #states プロパティを追加します。

<?php

/**
 * @file
 * ノード編集フォームの特定のフィールドに#statesプロパティを追加.
 */

use Drupal\Core\Form\FormStateInterface;

/**
 * Implements hook_form_FORM_ID_alter().
 */
function d842_form_states_form_node_page_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if (array_key_exists('field_remarks', $form) && array_key_exists('field_remarks_flg', $form)) {

    // Form APIの #states プロパティを利用し、フィールドの表示/非表示を切り替え.
    $form['field_remarks']['#states'] = [
      'visible' => [
        ':input[name="field_remarks_flg[value]"]' => ['checked' => TRUE],
      ],
    ];

  }
}

ノード編集フォーム(#states実装後)

#states プロパティでチェックボックスの状態によりテキストフィールドの表示/非表示が切り替わります。

form_states3

まとめ

以上のように Form API の #states プロパティを利用することにより、JavaScriptでコードを書くより短いコードで実装できます。
visible 以外の state もありますので、様々な動作をさせることが可能です。

簡単ですが、Form API の #states プロパティのご紹介でした。