Логика полей или условные поля — это удобная фича в Form API друпал. Она позволяет формализовать кучу мелкой логики на фронт-енд, связанной с взаимодействием пользователя с вашей формой.
Здесь я приведу пару примеров использования, а углубиться в подробности поможет документация.
Пример 1 — кнопка сабмит не активна, пока пользователь не заполнил поле заголовка статьи
Есть разные подходы к проверке обязательных полей. Вы можете позволить отправить данные и потом вернуть пользователю форму с ошибками. Вы можете осуществить проверку заполнения полей при нажатии сабмита, но не отправлять данные. Ну и третий способ — просто сделать кнопку сабмита не активной, если обязательное полей не заполнено.
Важно, чтобы пользователь при этом визуально различал enabled и disabled состояния кнопки.
В следующем примере я делаю неактивным сабмит у формы добавления нового топика форума, до тех пор, пока пользователь не введет заголовок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * Implements hook_form_alter */ function MYMODULE_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) { if ($form_id == 'node_forum_form') { $form['actions']['submit']['#states'] = [ 'disabled' => [ ':input[name="title[0][value]"]' => ['empty' => true], ] ]; } } |
Пример 2 — Прячем поле ввода альтернативного варианта
Классическая UI задача, когда форма предлагает опции из списка, и один из вариантов — «прочее». При этом пользователь может ввести альтернативный вариант в дополнительное поле. Задача заключается в том, чтобы не показывать доп. поле, пока пользователь не выберет в списке — прочее.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$form['field_with_options'] = [ '#type' => 'radios', '#title' => $this->t('Pick a colour'), '#options' => [ 'value1' => $this->t('OPTION 1'), 'value2' => $this->t('OPTION 2'), 'other' => $this->t('Other option'), ], ]; $form['field_for_other_text'] = [ '#type' => 'textfield', '#states' => [ // покажем этот textfield только если выбрана опция 'other' в предыдущем селекторе 'visible' => [ ':input[name="field_with_options"]' => ['value' => 'other'], ], ], ]; |