Вывод формы в модальном окне (Dialog | jQuery UI) в Drupal 8

Создадим простенькую форму в Drupal 8 и затем будем выводить ее в модальном окне.
Форма будет выводиться по клику на ссылке, которая будет располагаться на созданной программно странице с урлом /custom-page.

Файловая структура модуля будет следующая

  • /src
  • --/Controller
  • ----PagesController.php
  • --/Form
  • ----DialogForm.php
  • dialog_form.info.yml
  • dialog_form.routing.yml

dialog_form.info.yml


name: 'Dialog form'
type: module
description: 'Example dialog form.'
core: 8.x

dialog_form.routing.yml


dialog_form.page:
  path: '/custom-page'
  defaults:
    _content: '\Drupal\dialog_form\Controller\PagesController::customPage'
    _title: 'Custom page'
  requirements:
    _permission: 'access content'

dialog_form.modal:
  path: '/dialog-form'
  defaults:
    _title: 'Dialog form'
    _form: 'Drupal\dialog_form\Form\DialogForm'
  requirements:
    _permission: 'access content'

В контроллере в методе customPage создадим страницу с ссылкой , которая будет иметь класс 'use-ajax'. Ссылке добавим атрибут data-accepts равный 'application/vnd.drupal-modal'. В атрибут data-dialog-options запишем json объект , который содержит настройки для Dialog jQuery UI.
И также подключим библиотеку из ядра drupal.dialog.ajax, которая описана в core/core.libraries.yml

PagesController.php


<?php

/**
 * @file
 * Contains Drupal\dialog_form\Controller\PagesController.
 */

namespace Drupal\dialog_form\Controller;

use Drupal\Core\Controller\ControllerBase;

class PagesController extends ControllerBase {
  public function customPage() {
    return array(
      '#type' => 'markup',
      '#markup' => l(t('Dialog form'), 'dialog-form', array(
        'attributes' => array(
          'class' => 'use-ajax',
          'data-accepts' => 'application/vnd.drupal-modal',
          'data-dialog-options' => '{"width": "80%"}',
        ),
      )),
      '#attached' => array('library' => array(
        'core/drupal.dialog.ajax',
      )),
    );
  }
}

Создадим форму с FormID равным 'dialog_form' и одним полем типа 'tel'.

DialogForm.php


<?php

/**
 * @file
 * Contains Drupal\dialog_form\Form\DialogForm.
 */

namespace Drupal\dialog_form\Form;

use Drupal\Core\Form\FormBase;

/**
 * Implements an example form.
 */
class DialogForm extends FormBase {

  /**
   * {@inheritdoc}.
   */
  public function getFormID() {
    return 'dialog_form';
  }

  /**
   * {@inheritdoc}.
   */
  public function buildForm(array $form, array &$form_state) {
    $form['phone_number'] = array(
      '#type' => 'tel',
      '#title' => $this->t('Your phone number'),
    );
    $form['actions']['#type'] = 'actions';
    $form['actions']['submit'] = array(
      '#type' => 'submit',
      '#value' => $this->t('Save'),
      '#button_type' => 'primary',
    );
    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function validateForm(array &$form, array &$form_state) {
    if (strlen($form_state['values']['phone_number']) < 3) {
      $this->setFormError('phone_number', $form_state, t('The phone number is too short. Please enter a full phone number.'));
    }
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, array &$form_state) {
    drupal_set_message($this->t('Your phone number is @number', array('@number' => $form_state['values']['phone_number'])));
  }
}