Dieser Leitfaden zeigt, wie man ein Formular in Drupal 8 erstellt, bei dem die Auswahl eines Wertes in einem Feld automatisch ein anderes Feld mit AJAX aktualisiert.

Schritt 1: Erstellen Sie ein benutzerdefiniertes Modul

Erstellen Sie zunächst ein neues benutzerdefiniertes Modul. Nennen wir es `custom_ajax_form`.

### custom_ajax_form.info.yml name: Custom Ajax Form type: module description: 'Bietet ein Formular mit AJAX-Feldaktualisierungen.' core: 8.x package: Custom

Schritt 2: Erstellen Sie die Formular-Klasse

Erstellen Sie eine neue Formular-Klasse in `src/Form/DynamicFieldForm.php`:

<?php namespace Drupal\custom_ajax_form\Form; use Drupal\Core\Form\FormBase; use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Ajax\AjaxResponse; use Drupal\Core\Ajax\ReplaceCommand; class DynamicFieldForm extends FormBase { /** * {@inheritdoc} */ public function getFormId() { return 'dynamic_field_form'; } /** * {@inheritdoc} */ public function buildForm(array $form, FormStateInterface $form_state) { $form['primary_field'] = [ '#type' => 'select', '#title' => $this->t('Wählen Sie eine Option'), '#options' => [ '' => $this->t('- Auswählen -'), '1' => $this->t('Option 1'), '2' => $this->t('Option 2'), '3' => $this->t('Option 3'), ], '#ajax' => [ 'callback' => '::updateSecondaryField', 'wrapper' => 'secondary-field-wrapper', 'event' => 'change', ], ]; $form['secondary_field_wrapper'] = [ '#type' => 'container', '#attributes' => ['id' => 'secondary-field-wrapper'], ]; $form['secondary_field_wrapper']['secondary_field'] = [ '#type' => 'textfield', '#title' => $this->t('Dynamischer Inhalt'), '#readonly' => TRUE, '#value' => $this->getSecondaryFieldValue($form_state), ]; $form['submit'] = [ '#type' => 'submit', '#value' => $this->t('Absenden'), ]; return $form; } /** * Ajax-Callback zur Aktualisierung des sekundären Feldes. */ public function updateSecondaryField(array &$form, FormStateInterface $form_state) { return $form['secondary_field_wrapper']; } /** * Hilfsfunktion, um den Wert des sekundären Feldes zu erhalten. */ protected function getSecondaryFieldValue(FormStateInterface $form_state) { $trigger = $form_state->getTriggeringElement(); $value = ''; if ($trigger) { $selected_value = $form_state->getValue('primary_field');

// In einer echten Anwendung könnte dies Daten von einem Dienst oder einer Datenbank abrufen $values_map = [ '1' => 'Inhalt für Option 1', '2' => 'Inhalt für Option 2', '3' => 'Inhalt für Option 3', ];

$value = isset($values_map[$selected_value]) ? $values_map[$selected_value] : ''; } return $value; } /** * {@inheritdoc} */ public function submitForm(array &$form, FormStateInterface $form_state) { \Drupal::messenger()->addMessage($this->t('Formular erfolgreich abgesendet.')); } }

Schritt 3: Erstellen Sie eine Route

Erstellen Sie `custom_ajax_form.routing.yml`:

custom_ajax_form.dynamic_form: path: '/custom-ajax-form' defaults: _form: '\Drupal\custom_ajax_form\Form\DynamicFieldForm' _title: 'Dynamisches AJAX-Formular' requirements: _permission: 'access content'

Schritt 4 (Optional): Fügen Sie einen Menülink hinzu

Erstellen Sie `custom_ajax_form.links.menu.yml`:

custom_ajax_form.dynamic_form: title: 'Dynamisches AJAX-Formular' route_name: custom_ajax_form.dynamic_form menu_name: main

Erweiterte Implementierung mit Entity Reference

Hier ist, wie man das Formular modifiziert, um mit Entity-Reference-Feldern zu arbeiten:

protected function getSecondaryFieldValue(FormStateInterface $form_state) { $trigger = $form_state->getTriggeringElement(); $value = ''; if ($trigger) { $entity_id = $form_state->getValue('primary_field');

// Laden Sie die referenzierte Entität if ($entity_id && $entity = \Drupal::entityTypeManager()->getStorage('node')->load($entity_id)) { // Holen Sie sich einen spezifischen Feldwert von der referenzierten Entität $value = $entity->get('field_example')->value; } } return $value; }

Verwendung mit Views und Entity Reference

Um mit Views und Entity-Reference-Feldern zu integrieren:

1. Erstellen Sie eine Ansicht, die die Entitäten zurückgibt, auf die Sie verweisen möchten 2. Modifizieren Sie das Formular, um die Ergebnisse der Ansicht zu verwenden:

protected function getPrimaryFieldOptions() { $options = ['' => $this->t('- Auswählen -')];

// Laden Sie die Ergebnisse der Ansicht $view = Views::getView('your_view_name'); if ($view) { $view->execute(); foreach ($view->result as $row) { $entity = $row->_entity; $options[$entity->id()] = $entity->label(); } }

return $options; } public function buildForm(array $form, FormStateInterface $form_state) { $form['primary_field']['#options'] = $this->getPrimaryFieldOptions(); // ... Rest des Formularaufbaus }

Leistungsüberlegungen

1. Fügen Sie Ihrer Form Caching-Metadaten hinzu:

public function buildForm(array $form, FormStateInterface $form_state) { $form['#cache'] = [ 'contexts' => ['user.permissions'], 'tags' => ['node_list'], // Fügen Sie relevante Cache-Tags hinzu ];

// ... Rest des Formularaufbaus }

2. Verwenden Sie geeignete Cache-Tags in Ihrem AJAX-Callback:

public function updateSecondaryField(array &$form, FormStateInterface $form_state) { $response = new AjaxResponse(); $response->addCommand(new ReplaceCommand( '#secondary-field-wrapper', $form['secondary_field_wrapper'] ));

// Fügen Sie Cache-Metadaten hinzu $response->getCacheableMetadata()->addCacheTags(['node_list']);

return $response; }

Fehlerbehandlung

Fügen Sie Ihrer AJAX-Callback-Funktion eine ordnungsgemäße Fehlerbehandlung hinzu:

public function updateSecondaryField(array &$form, FormStateInterface $form_state) { try { return $form['secondary_field_wrapper']; } catch (\Exception $e) { watchdog_exception('custom_ajax_form', $e);

$response = new AjaxResponse(); $response->addCommand(new ReplaceCommand( '#secondary-field-wrapper', '<div class="messages messages--error">' . $this->t('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.') . '</div>' )); return $response; } }

Diese Implementierung bietet eine solide Grundlage für AJAX-basierte Feldaktualisierungen in Drupal 8, mit ordnungsgemäßer Fehlerbehandlung, Caching und Erweiterungsoptionen.