AJAX select returns 'illegal choice detected'

Question

Create a settings form for a module in Drupal 8 - when a user selects a View from a list, the drop down under it should populate with the displays in that view.

While the form updates the option list for the user, it also throws an error message on the screen "Illegal choice has been detected".

Here is the code (it doesn't paste very well):

http://cgit.drupalcode.org/tvi/tree/src/Form/SettingsForm.php?h=8.x-1.x

getViewDisplays is the ajax callback that is populating the options.

Some people who have posted about this around the internet say to set #validated on the select field to TRUE, though, that doesn't necessarily feel right. I still want to validate the submission to do some checks.

Answer 1

You can't populate the choices in the ajax handler. The ajax handler is purely for returning the re-rendered form. If you want to do more advanced stuff you can use ajax response but that's it.

What you need to do is to use form state storage to store the selected view name and submit handler that will set this value(ie copy the value form submitted values into storage) and rebuild the form.

In the form you have to check if the view is in the storage and if not set the default one and use it and if it is use that one. Load the displays in the form based on this view.

This is a portion of one of my forms:

<?php

/**
 * Defines an e-mail settings form.
 */
class EmailSettingsForm extends ConfigFormBase {

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $system_config = $this->config('system.mail');
    $plugin_id = $system_config->get('interface.default');
    $definitions = $this->mail->getDefinitions();

    if ($form_state->has('mail_plugin_id')) {
      $plugin_id = $form_state->get('mail_plugin_id');
    } else {
      $form_state->set('mail_plugin_id', $plugin_id);
    }

    // Make sure the plugin exists.
    $plugin_id = $this->mail->hasDefinition($plugin_id) ? $plugin_id : 'php_mail';

    $ajax = [
      'wrapper' => 'email-settings-form-ajax-wrapper',
      'callback' => '::ajaxRebuildForm'
    ];

    $form['#prefix'] = '<div id="' . $ajax['wrapper'] . '">';
    $form['#suffix'] = '</div>';

    $form['email_plugin'] = [
      '#type' => 'select',
      '#title' => $this->t('E-mail provider'),
      '#default_value' => $plugin_id,
      '#required' => TRUE,
      '#ajax' => $ajax + ['trigger_as' => ['name' => 'email_plugin_submit']],
      '#options' => array_map(function($definition) {
        return $definition['label'];
      }, $definitions)
    ];

    $form['email_plugin_submit'] = [
      '#type' => 'submit',
      '#name' => 'email_plugin_submit',
      '#value' => $this->t('Submit'),
      '#submit' => ['::changePluginSubmit'],
      '#limit_validation_errors' => [],
      '#ajax' => $ajax,
      '#attributes' => [
        'class' => ['js-hide']
      ]
    ];

    return $form;
  }

  /**
   * Submit handler that will change the mail plugin.
   *
   * @param array $form
   *   An associative array containing the structure of the form.
   * @param \Drupal\Core\Form\FormStateInterface $form_state
   *   The current state of the form.
   */
  public function changePluginSubmit(array &$form, FormStateInterface $form_state) {
    $plugin_id = $form_state->getValue('email_plugin');
    $form_state->set('mail_plugin_id', $plugin_id);
    $form_state->setRebuild();

    // Set the e-mail plugin.
    $this->configFactory()->getEditable('system.mail')
      ->set('interface.default', $plugin_id)
      ->save();
  }

  /**
   * Ajax submit handler that will return the whole form structure.
   *
   * @param array $form
   *   An associative array containing the structure of the form.
   * @param \Drupal\Core\Form\FormStateInterface $form_state
   *   The current state of the form.
   *
   * @return array
   *   The form structure.
   */
  public function ajaxRebuildForm(array &$form, FormStateInterface $form_state) {
    return $form;
  }
}

It's not a perfect example since there are other things going on that I have removed for simplicity but you should get the logic.