class ModalForm

Same name in other branches
  1. 4.0.x modules/form_api_example/src/Form/ModalForm.php \Drupal\form_api_example\Form\ModalForm

Implements the ModalForm form controller.

This example demonstrates implementation of a form that is designed to be used as a modal form. To properly display the modal the link presented by the \Drupal\form_api_example\Controller\Page page controller loads the Drupal dialog and ajax libraries. The submit handler in this class returns ajax commands to replace text in the calling page after submission .

Hierarchy

Expanded class hierarchy of ModalForm

See also

\Drupal\Core\Form\FormBase

1 string reference to 'ModalForm'
form_api_example.routing.yml in modules/form_api_example/form_api_example.routing.yml
modules/form_api_example/form_api_example.routing.yml

File

modules/form_api_example/src/Form/ModalForm.php, line 24

Namespace

Drupal\form_api_example\Form
View source
class ModalForm extends FormBase {
    
    /**
     * {@inheritdoc}
     */
    public static function create(ContainerInterface $container) {
        // Create a new form object and inject its services.
        $form = new static();
        $form->setRequestStack($container->get('request_stack'));
        $form->setStringTranslation($container->get('string_translation'));
        $form->setMessenger($container->get('messenger'));
        return $form;
    }
    
    /**
     * {@inheritdoc}
     */
    public function getFormId() {
        return 'form_api_example_modal_form';
    }
    
    /**
     * Helper method so we can have consistent dialog options.
     *
     * @return string[]
     *   An array of jQuery UI elements to pass on to our dialog form.
     */
    protected static function getDataDialogOptions() {
        return [
            'width' => '50%',
        ];
    }
    
    /**
     * {@inheritdoc}
     */
    public function buildForm(array $form, FormStateInterface $form_state, $nojs = NULL) {
        // Add the core AJAX library.
        $form['#attached']['library'][] = 'core/drupal.ajax';
        $form['description'] = [
            '#type' => 'item',
            '#markup' => $this->t('This example demonstrates a form that can work as a normal multi-request form, or as a modal dialog using AJAX.'),
        ];
        // Add a link to show this form in a modal dialog if we're not already in
        // one.
        if ($nojs == 'nojs') {
            $form['use_ajax_container'] = [
                '#type' => 'details',
                '#open' => TRUE,
            ];
            $form['use_ajax_container']['description'] = [
                '#type' => 'item',
                '#markup' => $this->t('In order to show a modal dialog by clicking on a link, that link has to have class <code>use-ajax</code> and <code>data-dialog-type="modal"</code>. This link has those attributes.'),
            ];
            $form['use_ajax_container']['use_ajax'] = [
                '#type' => 'link',
                '#title' => $this->t('See this form as a modal.'),
                '#url' => Url::fromRoute('form_api_example.modal_form', [
                    'nojs' => 'ajax',
                ]),
                '#attributes' => [
                    'class' => [
                        'use-ajax',
                    ],
                    'data-dialog-type' => 'modal',
                    'data-dialog-options' => json_encode(static::getDataDialogOptions()),
                    // Add this id so that we can test this form.
'id' => 'ajax-example-modal-link',
                ],
            ];
        }
        // This element is responsible for displaying form errors in the AJAX
        // dialog.
        if ($nojs == 'ajax') {
            $form['status_messages'] = [
                '#type' => 'status_messages',
                '#weight' => -999,
            ];
        }
        $form['title'] = [
            '#type' => 'textfield',
            '#title' => $this->t('Title'),
            '#required' => TRUE,
        ];
        // Group submit handlers in an actions element with a key of "actions" so
        // that it gets styled correctly, and so that other modules may add actions
        // to the form.
        $form['actions'] = [
            '#type' => 'actions',
        ];
        // Add a submit button that handles the submission of the form.
        $form['actions']['submit'] = [
            '#type' => 'submit',
            '#value' => $this->t('Submit'),
            '#ajax' => [
                'callback' => '::ajaxSubmitForm',
                'event' => 'click',
            ],
        ];
        // Set the form to not use AJAX if we're on a nojs path. When this form is
        // within the modal dialog, Drupal will make sure we're using an AJAX path
        // instead of a nojs one.
        if ($nojs == 'nojs') {
            unset($form['actions']['submit']['#ajax']);
        }
        return $form;
    }
    
    /**
     * {@inheritdoc}
     */
    public function submitForm(array &$form, FormStateInterface $form_state) {
        $title = $form_state->getValue('title');
        $this->messenger()
            ->addMessage($this->t('Submit handler: You specified a title of @title.', [
            '@title' => $title,
        ]));
    }
    
    /**
     * Implements the submit handler for the modal dialog AJAX call.
     *
     * @param array $form
     *   Render array representing from.
     * @param \Drupal\Core\Form\FormStateInterface $form_state
     *   Current form state.
     *
     * @return \Drupal\Core\Ajax\AjaxResponse
     *   Array of AJAX commands to execute on submit of the modal form.
     */
    public function ajaxSubmitForm(array &$form, FormStateInterface $form_state) {
        // We begin building a new ajax reponse.
        $response = new AjaxResponse();
        // If the user submitted the form and there are errors, show them the
        // input dialog again with error messages. Since the title element is
        // required, the empty string wont't validate and there will be an error.
        if ($form_state->getErrors()) {
            // If there are errors, we can show the form again with the errors in
            // the status_messages section.
            $form['status_messages'] = [
                '#type' => 'status_messages',
                '#weight' => -10,
            ];
            $response->addCommand(new OpenModalDialogCommand($this->t('Errors'), $form, static::getDataDialogOptions()));
        }
        else {
            // We don't want any messages that were added by submitForm().
            $this->messenger()
                ->deleteAll();
            // We use FormattableMarkup to handle sanitizing the input.
            // @todo There's probably a better way to do this.
            $title = new FormattableMarkup(':title', [
                ':title' => $form_state->getValue('title'),
            ]);
            // This will be the contents for the modal dialog.
            $content = [
                '#type' => 'item',
                '#markup' => $this->t("Your specified title of '%title' appears in this modal dialog.", [
                    '%title' => $title,
                ]),
            ];
            // Add the OpenModalDialogCommand to the response. This will cause Drupal
            // AJAX to show the modal dialog. The user can click the little X to close
            // the dialog.
            $response->addCommand(new OpenModalDialogCommand($title, $content, static::getDataDialogOptions()));
        }
        // Finally return our response.
        return $response;
    }

}

Members

Title Sort descending Modifiers Object type Summary Overriden Title Overrides
DependencySerializationTrait::$_entityStorages protected property
DependencySerializationTrait::$_serviceIds protected property
DependencySerializationTrait::__sleep public function 1
DependencySerializationTrait::__wakeup public function 2
FormBase::$configFactory protected property The config factory. 3
FormBase::$requestStack protected property The request stack. 1
FormBase::$routeMatch protected property The route match.
FormBase::config protected function Retrieves a configuration object.
FormBase::configFactory protected function Gets the config factory for this form. 3
FormBase::container private function Returns the service container.
FormBase::currentUser protected function Gets the current user.
FormBase::getRequest protected function Gets the request object.
FormBase::getRouteMatch protected function Gets the route match.
FormBase::logger protected function Gets the logger for a specific channel.
FormBase::redirect protected function Returns a redirect response object for the specified route.
FormBase::resetConfigFactory public function Resets the configuration factory.
FormBase::setConfigFactory public function Sets the config factory for this form.
FormBase::setRequestStack public function Sets the request stack object to use.
FormBase::validateForm public function Form validation handler. Overrides FormInterface::validateForm 73
LoggerChannelTrait::$loggerFactory protected property The logger channel factory service.
LoggerChannelTrait::getLogger protected function Gets the logger for a specific channel.
LoggerChannelTrait::setLoggerFactory public function Injects the logger channel factory.
MessengerTrait::$messenger protected property The messenger. 17
MessengerTrait::messenger public function Gets the messenger. 17
MessengerTrait::setMessenger public function Sets the messenger.
ModalForm::ajaxSubmitForm public function Implements the submit handler for the modal dialog AJAX call.
ModalForm::buildForm public function Form constructor. Overrides FormInterface::buildForm
ModalForm::create public static function Instantiates a new instance of this class. Overrides FormBase::create
ModalForm::getDataDialogOptions protected static function Helper method so we can have consistent dialog options.
ModalForm::getFormId public function Returns a unique string identifying the form. Overrides FormInterface::getFormId
ModalForm::submitForm public function Form submission handler. Overrides FormInterface::submitForm
RedirectDestinationTrait::$redirectDestination protected property The redirect destination service. 1
RedirectDestinationTrait::getDestinationArray protected function Prepares a &#039;destination&#039; URL query parameter for use with \Drupal\Core\Url.
RedirectDestinationTrait::getRedirectDestination protected function Returns the redirect destination service.
RedirectDestinationTrait::setRedirectDestination public function Sets the redirect destination service.
StringTranslationTrait::$stringTranslation protected property The string translation service. 3
StringTranslationTrait::formatPlural protected function Formats a string containing a count of items.
StringTranslationTrait::getNumberOfPlurals protected function Returns the number of plurals supported by a given language.
StringTranslationTrait::getStringTranslation protected function Gets the string translation service.
StringTranslationTrait::setStringTranslation public function Sets the string translation service to use. 2
StringTranslationTrait::t protected function Translates a string to the current language or to a given language.