Tips for Form API of Drupal 8 | Drupal 8

Tips for Form API of Drupal 8

Submitted by editor on Fri, 08/26/2016 - 14:01
Question

Some Tips of the drupal 8 form API.

  • How to add something just after a input ?
  • How to make a collapsible field set ?
  • How to Add a custom Validator / Submitter?
  • How to use multiple submit buttons ?

Add html after a field

(#field_prefix and #field_suffix).

Example:
$form['fieldname'] = array(
  '#type' => 'input',
  '#title' => t('The Label'),
  '#prefix' => '<span>Your HTML Just Before</span>'
  '#suffix' => '<span>Your HTML Just After</span>'

);

Add HTML just after a input, select, textarea ... (#field_prefix and #field_suffix)

Example:
$form['fieldname'] = array(
  '#type' => 'input',
  '#title' => t('The Label'),
  '#field_prefix' => '<span>Your HTML Just Before input</span>'
  '#field_suffix' => '<span>Your HTML Just After input</span>'

);

Make a collapsible field set

Drupal 8 use HTML5  details tag and "OPEN" attribute to make a collapsible fieldset.  Example:
$form['filters'] = array(
  '#type' => 'details',
  '#title' => 'Filters',
  '#open' => FALSE,
);

Add a custom Validator / Submitter

Step 1. Create your Validator method

public function validateFormCustom(array &$form, FormStateInterface $form_state) {
  //Your validation codes
}

Step 2. Add this validator to your form.

$form['#validate'][] = '::validateFormCustom';

Handle multiple submit buttons

Step 1. Create several submit buttons and add custom submitter to each buttons (If you add nothing, it use the default submit method):

$form['actions']['submit_apply'] = [
  '#type' => 'submit',
  '#value' => t('Apply'),
];
$form['actions']['submit_reset'] = [
  '#type' => 'submit',
  '#value' => t('Reset'),
  '#submit' => array('::submitFormReset'),
];

Step 2. Then create your custom submit functions like:

public function submitForm(array &$form, FormStateInterface $form_state) {
  drupal_set_message("Apply");
  $form_state->setRebuild(TRUE);
}
public function submitFormReset(array &$form, FormStateInterface $form_state) {
  drupal_set_message("Reset");
  $form_state->setRebuild(FALSE);
}

 

Set Form elements as arrays in Drupal 8

Use the "#tree" => TRUE configuration.
Example :
  $form["test_field"]["#tree"] = TRUE;
  $form["test_field"][] = array(
        "#type" => "textfield",
        "#title" => "Title 1",
    );
  $form["test_field"][] = array(
        "#type" => "textfield",
        "#title" => "Title 2",
    );

 

Add WYSIWYG CKEditor widget to a textarea

$form['fieldname'] = array(
  '#type' => 'text_format',
  '#title' => t('WYSIWYG Text field'),
  '#format' => 'full_html' //the default format used for editor.
);

Type Container

A 'container' allow to hold  fields, markup ... or to group of fields with all advantages of the api field element.
Example : Add the states visible to a type markup.
$form['the_container'] = [
  '#type' => "container",
  '#prefix' => "<div class='text'>",
  '#suffix' => "</div>",
  '#states' => ['visible' => ['select[name="type"]' => ['value' => '1'],],],
];
$form['the_container']['markup'] = [
  '#markup' => "A text",
];

Number field

Example of number field on drupal 8 :
$form['count'] = [
  '#type' => 'number',
  '#title' => 'A Number',
  '#step' => 2,
  '#min' => 1,
  '#max' => 10,
  '#required' => TRUE,
  '#default_value' => 4,
];

Add new comment