如何在 drupal 8 中使用预览数据填写页面构建多步骤表单？答案

【问题标题】：How to Build Multi-step Forms with Preview data fill page in drupal 8?如何在 drupal 8 中使用预览数据填写页面构建多步骤表单？
【发布时间】：2016-09-20 05:18:42
【问题描述】：

很多天我都在研究 drupal 8 自定义表单模块，这是我使用 SessionManagerInterface 完成的多步骤表单，它工作正常，但我想在提交之前在一页中显示所有数据我怎样才能实现这一点。这里我包括snapshot here

demo.routing.yml

demo.multistep_one:
  path: '/demo/multistep-one'
  defaults:
    _form: '\Drupal\demo\Form\Multistep\MultistepOneForm'
    _title: 'First form'
  requirements:
    _permission: 'access content'
demo.multistep_two:
  path: '/demo/multistep-two'
  defaults:
    _form: '\Drupal\demo\Form\Multistep\MultistepTwoForm'
    _title: 'Second form'
  requirements:
    _permission: 'access content'ent'

MultistepFormBase.php

namespace Drupal\demo\Form\Multistep;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Session\AccountInterface;
use Drupal\Core\Session\SessionManagerInterface;
use Drupal\user\PrivateTempStoreFactory;
use Symfony\Component\DependencyInjection\ContainerInterface;

abstract class MultistepFormBase extends FormBase {

  /**
   * @var \Drupal\user\PrivateTempStoreFactory
   */
  protected $tempStoreFactory;

  /**
   * @var \Drupal\Core\Session\SessionManagerInterface
   */
  private $sessionManager;

  /**
   * @var \Drupal\Core\Session\AccountInterface
   */
  private $currentUser;

  /**
   * @var \Drupal\user\PrivateTempStore
   */
  protected $store;

  /**
   * Constructs a \Drupal\demo\Form\Multistep\MultistepFormBase.
   *
   * @param \Drupal\user\PrivateTempStoreFactory $temp_store_factory
   * @param \Drupal\Core\Session\SessionManagerInterface $session_manager
   * @param \Drupal\Core\Session\AccountInterface $current_user
   */
  public function __construct(PrivateTempStoreFactory $temp_store_factory, SessionManagerInterface $session_manager, AccountInterface $current_user) {
    $this->tempStoreFactory = $temp_store_factory;
    $this->sessionManager = $session_manager;
    $this->currentUser = $current_user;

    $this->store = $this->tempStoreFactory->get('multistep_data');
  }

  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container) {
    return new static(
      $container->get('user.private_tempstore'),
      $container->get('session_manager'),
      $container->get('current_user')
    );
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    // Start a manual session for anonymous users.
    if ($this->currentUser->isAnonymous() && !isset($_SESSION['multistep_form_holds_session'])) {
      $_SESSION['multistep_form_holds_session'] = true;
      $this->sessionManager->start();
    }

    $form = array();
    $form['actions']['#type'] = 'actions';
    $form['actions']['submit'] = array(
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
      '#button_type' => 'primary',
      '#attributes' => array(
              'class' => array(
                   'btn btn-register' 
                ),
    ),
);


    return $form;
  }

MultistepOneForm.php 哪个子窗体

namespace Drupal\demo\Form\Multistep;

use Drupal\Core\Form\FormStateInterface;

class MultistepOneForm extends MultistepFormBase {

  /**
   * {@inheritdoc}.
   */
  public function getFormId() {
    return 'multistep_form_one';
  }

  /**
   * {@inheritdoc}.
   */
  public function buildForm(array $form, FormStateInterface $form_state) {

    $form = parent::buildForm($form, $form_state);

    $form['fname'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Your name'),
      '#default_value' => $this->store->get('fname') ? $this->store->get('fname') : '',
       '#attributes' => array(
              'class' => array(
                   'form-control' 
                   ),
               ),

    );

    $form['lname'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Your Last Name'),
      '#default_value' => $this->store->get('lname') ? $this->store->get('lname') : '',
       '#attributes' => array(
              'class' => array(
                   'form-control' 
                   ),
               ),
    $form['actions']['submit']['#value'] = $this->t('Continue');

    return $form;
  }  
  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    $this->store->set('fname', $form_state->getValue('fname'));
   $this->store->set('lname', $form_state->getValue('lname'));
 $form_state->setRedirect('demo.multistep_two');   
}
}

MultistepTwoForm.php

namespace Drupal\demo\Form\Multistep;

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Url;

class MultistepTwoForm extends MultistepFormBase {

  /**
   * {@inheritdoc}.
   */
  public function getFormId() {
    return 'multistep_form_two';
  }

  /**
   * {@inheritdoc}.
   */
  public function buildForm(array $form, FormStateInterface $form_state) {

    $form = parent::buildForm($form, $form_state);

    $form['jfname'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Joint Account Holder First Name'),
      '#attributes' => array(
              'class' => array(
                   'form-control' 
                   ),
               ),
     );

    $form['jlname'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Joint Account Holder Last Name'),
      '#attributes' => array(
              'class' => array(
                   'form-control' 
                   ),
               ),
    );
 $form['actions']['previous'] = array(
      '#type' => 'link',
      '#title' => $this->t('Previous'),
       '#url' => Url::fromRoute('demo.multistep_one'),
      '#suffix' => '</div>',
         '#attributes' => array(
              'class' => array(
                   'btn btn-register' 
                   ),
               ),

    );
 $form['actions']['submit']['#value'] = $this->t('Continue');
    return $form;
  }

 public function submitForm(array &$form, FormStateInterface $form_state) {
    $this->store->set('jfname', $form_state->getValue('jfname'));
    $this->store->set('jlname', $form_state->getValue('jlname'));
   // $form_state->setRedirect('demo.multistep_three');
  }
}

这里提出了我的担忧如何根据我的快照显示所有数据。需要采取什么操作来显示数据。一件事是我有 3 个月的 drupal 经验，所以无法决定我会做什么？此代码是 www.sitepoint.com 的示例，我采用表格三，会话数据显示在标签中，无论好坏我不知道给我适当的方向提前致谢

【问题讨论】：

问题很大，要求实现特定功能，但没有说明作者已经尝试过（或未尝试过）以及他们遇到困难的地方。该主题已经在多篇博客文章和教程中很好地在线涵盖，使用明显的搜索关键字很容易找到。
谢谢，皮埃尔，我已经完成了多步表单，但问题仅在提交前显示所有数据单页。我不知道该怎么做？
重做问题，提供工作代码（尽量让它简单，删除现实世界的东西以便更容易掌握）并准确指出什么有效，什么无效（或不见了）。见stackoverflow.com/help/how-to-ask

标签： drupal-7 drupal-modules drupal-8

【解决方案1】：

在您的设置中，您将在 MultistepTwoForm 中提交多表单。更改如下：

再构建一个表单：MultiStepPreview。这将保留您的预览。
不要在 MultistepTwoForm 中提交表单，而是使用 $form_state->setRedirect() 将表单重定向到 MultiStepPreview

在 MultiStepPreview 中：

读取商店中的钥匙
构建一个包含预览的表单元素（我制作了一个 html 表格来包含预览）

提交表格。

class OverviewForm extends MultiStepFormBase {
  public function buildForm(array $form, FormStateInterface $form_state) {
    // get data from the store
    $your_details = $this->store->get('your_details');
    $order = $this->store->get('order_details');

    // make a HTML table containing the data in store
    $markup = '<table>'; 
    // loop through $your_details and $your_order and put them in $markup

    $form = parent::buildForm($form, $form_state);
    $form['preview'] = [
      '#markup' => $markup,
    ];
    //in my setup all the buttons are build by MultiStepFormBase  
   return $form;
  }

}

【讨论】：