滚动
9.8.2. Drupal 中的多步骤弹出表单
在本文中，我们将继续学习 Drupal 8 的表单 API，并创建一个多步骤表单。我们已经为模块创建了常规配置表单，使用 $form_state 来存储步骤之间的数据，类似的方式也可以用于创建多步骤表单。
代码示例可以在 GitHub 上找到：
https://github.com/levmyshkin/drupalbook8
对于一个多步骤表单，你需要添加一个表单类：
/modules/custom/drupalbook/src/Form/MultiStepForm.php
<?php
/**
* @file
* Contains Drupal\drupalbook\Form\MultiStepForm.
*/
namespace Drupal\drupalbook\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
class MultiStepForm extends FormBase
{
protected $step = 1;
/**
* {@inheritdoc}
*/
protected function getEditableConfigNames()
{
}
/**
* {@inheritdoc}
*/
public function getFormID()
{
return 'multi_step_form';
}
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state)
{
//$form = parent::buildForm($form, $form_state);
// Add a wrapper div that will be used by the Form API to update the form using AJAX
$form['#prefix'] = '<div id="ajax_form_multistep_form">';
$form['#suffix'] = '</div>';
if ($this->step == 1) {
$form['message-step'] = [
'#markup' => '<div class="step">' . $this->t('Step 1 of 2') . '</div>',
];
$form['message-title'] = [
'#markup' => '<h2>' . $this->t('Who are you?') . '</h2>',
];
$form['first_name'] = [
'#type' => 'textfield',
'#title' => $this->t('First name'),
'#placeholder' => $this->t('First name'),
'#required' => TRUE,
];
$form['last_name'] = [
'#type' => 'textfield',
'#title' => $this->t('Last name'),
'#placeholder' => $this->t('Last name'),
'#required' => TRUE,
];
}
if ($this->step == 2) {
$form['message-step'] = [
'#markup' => '<div class="step">' . $this->t('Step 2 of 2') . '</div>',
];
$form['message-title'] = [
'#markup' => '<h2>' . $this->t('Please enter your contact details below:') . '</h2>',
];
$form['phone'] = [
'#type' => 'textfield',
'#title' => $this->t('Phone'),
'#placeholder' => $this->t('Phone'),
'#required' => TRUE,
];
$form['email'] = [
'#type' => 'email',
'#title' => $this->t('Email address'),
'#placeholder' => $this->t('Email address'),
'#attributes' => array('class' => array('mail-first-step')),
'#required' => TRUE,
];
$form['subscribe'] = [
'#type' => 'checkbox',
'#title' => $this->t('Subscribe to newsletter'),
];
$form['agree'] = [
'#markup' => '<p class="agree">' . $this->t(' By signing up you agree to the <a href="@terms">Terms and Conditions</a> and <a href="@policy">Privacy Policy</a>',
array('@terms' => '/terms-and-conditions', '@policy' => '/privacy-policy')) . '</p>',
];
}
if ($this->step == 3) {
$form['message-step'] = [
'#markup' => '<p class="complete">' . $this->t('- Complete -') . '</p>',
];
$form['message-title'] = [
'#markup' => '<h2>' . $this->t('Thank you') . '</h2>',
];
}
if ($this->step == 1) {
$form['buttons']['forward'] = array(
'#type' => 'submit',
'#value' => t('Next'),
'#prefix' => '<div class="step1-button">',
'#suffix' => '</div>',
'#ajax' => array(
// We pass in the wrapper we created at the start of the form
'wrapper' => 'ajax_form_multistep_form',
// We pass a callback function we will use later to render the form for the user
'callback' => '::ajax_form_multistep_form_ajax_callback',
'event' => 'click',
),
);
}
if ($this->step == 2) {
$form['buttons']['forward'] = array(
'#type' => 'submit',
'#value' => t('Submit'),
'#ajax' => array(
// We pass in the wrapper we created at the start of the form
'wrapper' => 'ajax_form_multistep_form',
// We pass a callback function we will use later to render the form for the user
'callback' => '::ajax_form_multistep_form_ajax_callback',
'event' => 'click',
),
);
}
$form['#attached']['library'][] = 'drupalbook/multistep_form';
return $form;
}
/**
* {@inheritdoc}
*/
public function validateForm(array &$form, FormStateInterface $form_state) {
return parent::validateForm($form, $form_state);
}
/**
* {@inheritdoc}
*/
public function submitForm(array &$form, FormStateInterface $form_state) {
if ($this->step == 2) {
$values = $form_state->getValues();
$email = $values['email'];
// Save data or send email here.
}
$this->step++;
$form_state->setRebuild();
}
public function ajax_form_multistep_form_ajax_callback(array &$form, FormStateInterface $form_state) {
return $form;
}
}
接下来，我们将弄清楚这些代码的作用。与此同时，让我们为我们的表单创建一个路由：
/modules/custom/drupalbook/drupalbook.routing.yml:
drupalbook.multistep_form:
path: '/multistep-form'
defaults:
_form: '\Drupal\drupalbook\Form\MultiStepForm'
_title: 'Subscribe to newsletter'
requirements:
_permission: 'access content'
这将在 /multistep-form 上创建一个表单：
为了使此表单在模态弹窗中打开，你需要添加一个区块或只是一个带有特定 use-ajax 类和 data-dialog-type="modal" 属性的文本，并链接到表单页面。你还需要启用以下库：core/drupal.dialog.ajax，core/jquery.form。如果你通过区块添加它，你将获得以下代码，用于弹窗中表单的打开按钮：modules/custom/drupalbook/src/Plugin/Block/SubscribeFormButton.php
<?php
namespace Drupal\drupalbook\Plugin\Block;
use Drupal\Core\Block\BlockBase;
/**
* Provides a button subscribe to newsletter.
*
* @Block(
* id = "drupalbook_subsribe_form_button",
* admin_label = @Translation("Subscribe to Newsletter"),
* )
*/
class SubscribeFormButton extends BlockBase {
/**
* {@inheritdoc}
*/
public function build() {
$text = '<a href="/multistep-form" class="use-ajax" data-dialog-type="modal">Subscribe</a>';
return [
'#markup' => $text,
'#attached' => array(
'library' => array(
'core/drupal.dialog.ajax',
'core/jquery.form',
),
),
];
}
}
弹窗中的表单将如下所示：
我还在 drupalbook.libraries.yml 文件中连接了一个自定义库：
modules/custom/drupalbook/drupalbook.libraries.yml
multistep_form:
css:
css/multistep_form.css: {}
js:
scripts/multistep_form.js: {}
dependencies:
- core/jquery
- core/jquery.once
需要对表单进行样式设置，并连接所需的 jQuery 插件。因此，你需要创建更多的文件：
需要对表单进行样式设置，并连接所需的 jQuery 插件。因此，你需要创建更多的文件：
modules/custom/drupalbook/css/multistep_form.css
modules/custom/drupalbook/scripts/multistep_form.js
代码示例可以在 GitHub 上找到：
https://github.com/levmyshkin/drupalbook8