How can I hide or show fields using states with hook form alter

Question

We have been using Field States UI module with some success, but the Comparison Value does always not work for multiple values, I have tried to modify the valuse right in the entity_form_display.node yml file but no luck. I will also try the Conditional Fields module for D8. I also want to try to do this using code. I am trying an example using hook form alter taken from this post. But I cant get it to work. https://stackoverflow.com/questions/35380720/drupal-8-conditional-field. Should I be using drupal_process_states instead? Here is my code, I have two term reference fields field_test2 and field_test3. If you select the term id 15 from field_test2 then field_test3 will become visible.

use Drupal\Core\Form\FormStateInterface;

function mymodule_form_alter(array &$form, FormStateInterface $form_state, $form_id) { 

  if ($form_id == 'node_page_form' || $form_id == 'node_page_edit_form') {
    return;
  }

  if (isset($form['field_test2'])) {
    $states_when_category_is_design = array(
      'visible' => array(
        ':input[name="field_test2"]' => array('value' => '15'),
      ),
    );

    if (isset($form['field_test3'])) {
      $form['field_test3']['#states'] = $states_when_category_is_design;
    };
  }
}

Answer 1

It seems you re using the Drupal 7 syntax. For Drupal 8 this is slightly different.

You can implement hook_form_alter() as follows to change the visibility state of a form element as follows:

/**
 * Implements hook_form_alter().
 */
function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == 'node_article_edit_form') {  
    $form['field_other']['#states'] = [
      'visible' => [
          'select[name="field_reason"]' => ['value' => 'other']
      ]
    ];
   }
 }

This will make the field_other field visible if the other option is chosen in the reason select list.

Answer 2

I use this to display or hide fields with dependency in a dropdown select list.

/**
 * Implements hook_form_alter().
 */
function MYMODULE_form_alter(&$form, \Drupal\Core\Form\FormStateInterface &$form_state, $form_id) {
  if ($form_id == 'node_CONTENT_TYPE_form' || $form_id == 'node_CONTENT_TYPE_edit_form') {
    conditional_field_select(
      $form,
      'field_target',
      'field_controller',
      ['value_a', 'value_b', 'value_c'],
      'visible'
    );
  }
}

function conditional_field_select(array &$form, $targetField, $controlledBy, array $values, $state = 'invisible', $cond = 'or') {
  if (isset($form[$targetField]) && isset($form[$controlledBy])) {
    $form[$targetField]['#states'][$state] = [];
    foreach ($values as $value) {
      array_push($form[$targetField]['#states'][$state], ['select[name=' . $controlledBy . ']' => ['value' => $value]]);
      if (end($values) !== $value) {
        array_push($form[$targetField]['#states'][$state], $cond);
      }
    }
  }
}

It can easily be changed to input.

array_push($form[$targetField]['#states'][$state], [':input[name=' . $controlledBy . ']' => ['value' => $value]]);    

Answer 3

I am using #states for in a node form, with this code for Drupal 8 this is slightly different.

You can implement hook_form_alter() as follows to change the visibility state of a form element as follows:

/**
*Implements hook_form_alter().
*/
function mymodule_form_alter(&$form, &$form_state, $form_id) {
if($form_id == 'node_article_edit_form') { 
  $form['field_other']["widget"][0]['#states'] = [
    'visible' => [
      'input[name="field_reason[value]"]' => ['checked' => TRUE]
    ]
  ];
 }
}

This will make the field_other field visible if the checked option is chosen in the reason checknox.