Михаил Крайнюк - Form API + Drupal 8: Form and AJAX

FormAPI + Drupal 8 Form and AJAX

Mikhail Kraynuk

Mikhail Kraynuk Drupal Senior Developer

About my experience in Drupal development

●  Development ●  Project management ●  Drupal audit ●  Drupal Localization


Form API Drupal 8

OK

Class namespase

function Object-oriented programming

extends

use


New Form <?php /** * @file * Contains \Drupal\Example\Form\ExampleForm. */ namespace Drupal\example\Form; use Drupal\Core\Form\FormBase; use Drupal\Core\Form\FormStateInterface; /** * Provides a simple example form. */ class ExampleForm extends FormBase { }

public function getFormID() public function buildForm($form, $form_state) public function validateForm(&$form, $form_state) public function submitForm(&$form, &$form_state)


Form ID /** * Implements \Drupal\Core\Form\FormInterface::getFormID(). */ public function getFormID() { return ’my_special_form’; }

/** * Form builder for my form. */ function my_special_form($form, &$form_state) {…} Drupal 7


Form builder /** * Implements \Drupal\Core\Form\FormInterface::buildForm(). */ public function buildForm(array $form, FormStateInterface $form_state, $a = 0) { $form['my_text_field'] = array( '#type' => 'textfield', '#title' => 'Example', ); return $form; }


Form validate /** * Implements \Drupal\Core\Form\FormInterface::validateForm(). */ public function validateForm(array &$form, FormStateInterface $form_state) { if (strlen($form_state-‐>getValue('phone_number')) < 3) { $form_state-‐>setErrorByName('phone_number', $this-‐>t('The phone number is too short.')); } }


Form submit /** * Implements \Drupal\Core\Form\FormInterface::submitForm(). */ public function submitForm(array &$form, FormStateInterface $form_state) { $phone = $form_state-‐>getValue('phone_number'); }


Get form

$form = \Drupal::formBuilder()-‐>getForm('Drupal\Example\Form\ExampleForm'); $form = \Drupal::formBuilder()-‐>getForm('Drupal\Example\Form\ExampleForm', 'test');


Special forms


Settings form

use Drupal\Core\Form\FormBase; use Drupal\Core\Form\ConfigFormBase; class ExampleConfigForm extends ConfigFormBase { ... public function buildForm(array $form, FormStateInterface $form_state) { $form = parent::buildForm($form, $form_state); ... return $form; } ... }

system_settings_form() Drupal 7


Confirm form

use Drupal\Core\Form\FormBase; use Drupal\Core\Form\ConfirmFormBase; class ExampleConfigForm extends ConfirmFormBase { ... public function buildForm(array $form, FormStateInterface $form_state) { $form = parent::buildForm($form, $form_state); ... return $form; } ... }

confirm_form() Drupal 7


AJAX


AJAX

OK

OK

AJAX

AJAX commands


1. Add Ajax namespace <?php /** * @file * Contains \Drupal\Example\Form\ExampleForm. */ namespace Drupal\example\Form; use Drupal\Core\Form\FormBase; use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Ajax\AjaxResponse; use Drupal\Core\Ajax\HtmlCommand; /** * Provides a simple example form. */ class ExampleForm extends FormBase { ... }


2. Add Ajax-callback

/** * Provides a simple example form. */ class ExampleForm extends FormBase { public function getFormID() public function buildForm(array $form, FormStateInterface $form_state) public function validateForm(array &$form, FormStateInterface $form_state) public function submitForm(array &$form, FormStateInterface $form_state) public function validateAjaxPhone(array &$form, FormStateInterface $form_state) }


3. Update field public function buildForm(array $form, FormStateInterface $form_state) { ... $form['my_phone'] = array( '#type' => 'tel', '#title' => $this-‐>t('Phone number'), '#description' => $this-‐>t('Enter your phone number with “+”.'), '#ajax' => array( 'callback' => array($this, 'validateAjaxPhone'), 'event' => 'change', 'progress' => array( 'type' => 'throbber', 'message' => $this-‐>t('verifying…'), ), ), '#suffix' => '<span class=“valid-‐message”></span>', ); return $form; }


4. Fill Ajax-callback public function validateAjaxPhone(array &$form, FormStateInterface $form_state) { $response = new AjaxResponse(); if (substr($form_state-‐>getValue('my_phone'), 0, 1) == '+') { $message = $this-‐>t('Phone number is correct'); } else { $message = $this-‐>t('Please start your phone number with “+”'); } $response-‐>addCommand(new HtmlCommand('.valid-‐message', $message)); return $response; }


Ajax result


Ajax result

Mikhail Kraynuk Drupal Senior developer


[email protected] +7 961 870-26-99

Золотой спонсор:

Спасибо!

При поддержке: Серебряный спонсор:

Technology

Михаил Крайнюк - Form API + Drupal 8: Form and AJAX