SYMFONY 4 - Как пользователь может быть перенаправлен на следующую часть той же формы? (На другой странице)

Question

Доброе утро всем,

Будучи новичком в Symfony 4, вы рискуете, увидев меня на регулярной основе, задавая основные, но важные вопросы для моего понимания этого языка.

Сегодня у меня довольно смущающая проблема ... Я хотел бы убедиться, что, как только человек нажал «Далее», они будут перенаправлены на другую страницу, чтобы продолжить опрос.

Не могли бы вы объяснить, как сменить человека на странице после нажатия на следующую кнопку и убедиться, что проверки верны.

Это то, о чем я думал: -> Поместите все мои формы в SimulationController.php и отобразите, что я хочу, с моим Javascript. -> Создайте другую страницу, чтобы перейти к ней и отобразить остальную часть моей формы.

Спасибо за понимание.

Вот файлы:

SimulationController.php

<?php
// src/Controller/SimulationController.php

namespace App\Controller;


use App\Model\Client;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\Extension\Core\Type\IntegerType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Twig\Environment;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;



class SimulationController extends AbstractController
{

    /**
     * @Route("/simulation", name="simulation")
     * @param Environment $twig
     * @param Request $request
     * @return Response
     */
  public function situation(Environment $twig, Request $request): Response
  {

      $Client = new Client();
      $simulateur = $this->createFormBuilder($Client)

          /* Situation */
          ->add("famille", ChoiceType::class, [
              'label' => 'Votre situation familliale ?',
              'choices' => [
                  'Célibataire' => 'celibataire',
                  'Marié(e)' => 'marie',
                  'Pacsé(e)' => 'pacse',
                  'En concubinage' => 'concubinage',
                  'Divorcé(e)' => 'divorce',
                  'Veuf/Veuve' => 'veuf'
              ],
              'attr' => [
                  'class' => 'situation_familliale input']
          ])
          ->add('anneeDeNaissance', IntegerType::class, [
              'label' => 'Quelle est votre année de naissance ?',
              'required' => True,
              'attr' => [
                  'class' => 'naissance input',
                  'placeholder' => 'Ex : 1950']
          ])
          ->add('enfant', ChoiceType::class, [
              'label' => 'Avez vous des enfants ?',
              'choices' => array(
                  'Non' => False,
                  'Oui' => True,
              ),
              'attr' => [
                  'class' => 'enfant']
          ])
          ->add('enfant_nombre', IntegerType::class, [
              'label' => 'Combien avez-vous d\'enfants ?',
              'required' => True,
              'attr' => [
                  'class' => 'enfant_nombre input',
                  'placeholder' => 'Ex : 3']])
          ->add('enfant_foyer', IntegerType::class, [
              'label' => 'Combien sont encore dans votre foyer fiscal ?',
              'required' => True,
              'attr' => [
                  'class' => 'enfant_foyer input',
                  'placeholder' => 'Ex : 3']])
          ->add('pension', ChoiceType::class, [
              'label' => 'Payez vous une pension ?',
              'choices' => array(
                  'Non' => False,
                  'Oui' => True,
              ),
              'attr' => [
                  'class' => 'pension']
          ])
          ->add('pension_tarif', IntegerType::class, [
              'label' => 'Combien vous coûte cette pension mensuellement?',
              'required' => True,
              'attr' => [
                  'class' => 'pension_tarif input',
                  'placeholder' => 'Ex : 450€']])


          /* Patrimoine */
          ->add('submit', SubmitType::class,[
              'label' => "Suivant",
              'attr' => [
                  "class" => "envoyer show",
                  "onClick" => "pageSuivante()",
              ]
          ])

          ->getForm();


      /* Récupération des données afin de les garder en mémoire */


      $simulateur->handleRequest($request);
      $simulateur->getData();
      dump($Client);
      return $this->render('/content/simulation.html.twig', [
          'SituationForm'=>$simulateur->createView()
      ]);

  }
}

Client.php

<?php


namespace App\Model;

use Symfony\Component\Validator\Constraints as Assert;


class Client{

    public $famille;

    /**
     * @Assert\NotBlank
     * @Assert\Range(
     *      min = 1900,
     *      max = 2019,
     *      minMessage = "Merci de rentrer une valeur correcte. ",
     *      maxMessage = "Merci de rentrer une valeur correcte."
     * )
     *

     */
    public $anneeDeNaissance;


    public $enfant;

    /**
     * @Assert\NotBlank
     * @Assert\Range(
     *      min = 0,
     *      max = 200,
     *      minMessage = "Merci de rentrer une valeur correcte. ",
     *      maxMessage = "Merci de rentrer une valeur correcte."
     * )
     *
     */
    public $enfant_nombre;

    /**
     * @Assert\NotBlank
     * @Assert\Range(
     *      min = 0,
     *      max = 200,
     *      minMessage = "Merci de rentrer une valeur correcte. ",
     *      maxMessage = "Merci de rentrer une valeur correcte."
     * )
     *
     */
    public $enfant_foyer;

    public $pension;

    /**
     * @Assert\NotBlank
     * @Assert\Range(
     *      min = 0,
     *      max = 9999999999,
     *      minMessage = "Merci de rentrer une valeur correcte.",
     *      maxMessage = "Merci de rentrer une valeur correcte."
     * )
     *
     */
    public $pension_tarif;
}

simulation.html.twig

{% extends "home.html.twig" %}



{% block title %}  Simulimmo - Simulateur{% endblock %}
{% block stylesheet_content %}<link rel="stylesheet" href="css/simulateur.css"> {% endblock %}

{% block contact %}  {% endblock %}
{% block nous %}  {% endblock %}
{% block simulation %}  {% endblock %}

 {% block naviguation %}

     <div class="container-naviguation">
         <div class="content-naviguation">
             <div class="colonne-naviguation">
                 <div class="numero-naviguation situation_naviguation active"><p>1</p></div>
                 <div class="texte-naviguation"> <strong> SITUATION </strong> </div>
             </div>

             <div class="colonne-naviguation separation-naviguation patrimoine_separation"></div>

             <div class="colonne-naviguation">
                 <div class="numero-naviguation patrimoine_naviguation"><p>2</p></div>
                 <div class="texte-naviguation"><strong> PATRIMOINE </strong> </div>
             </div>

             <div class="colonne-naviguation separation-naviguation epargne_separation"></div>

             <div class="colonne-naviguation">
                 <div class="numero-naviguation epargne_naviguation"><p>3</p></div>
                 <div class="texte-naviguation"> <strong>ÉPARGNE</strong> </div>
             </div>

             <div class="colonne-naviguation separation-naviguation objectifs_separation"></div>

             <div class="colonne-naviguation">
                 <div class="numero-naviguation objectifs_naviguation"><p>4</p></div>
                 <div class="texte-naviguation"> <strong>OBJECTIFS</strong> </div>
             </div>

             <div class="colonne-naviguation separation-naviguation resultats_separation"></div>

             <div class="colonne-naviguation">
                 <div class="numero-naviguation resultats_naviguation"><p>5</p></div>
                 <div class="texte-naviguation"> <strong>RÉSULTATS</strong></div>
             </div>
         </div>
     </div>
 {% endblock %}

{% block body %}


    <!--

    Partie questionnaire

    -->
    <div class="container-questionnaire">
        <div class="content-questionnaire">
            <div class="section">
                <div class="situation section show">
                    <h1> SITUATION </h1>
                    {{ form_start(SituationForm) }}
                        {{ form_row(SituationForm.famille) }}
                        {{ form_row(SituationForm.anneeDeNaissance)}}
                        {{ form_row(SituationForm.enfant)}}
                        {{ form_row(SituationForm.enfant_nombre) }}
                        {{ form_row(SituationForm.enfant_foyer) }}
                        {{ form_row(SituationForm.pension) }}
                        {{ form_row(SituationForm.pension_tarif) }}
                    {{ form_end(SituationForm) }}
                </div>

                <!-- Section 2 | patrimoine -->
                <div class="patrimoine section hidden">
                    <h1>PATRIMOINE </h1>
                    {% block patrimoine %} {% endblock %}
                </div>

                <!-- Section 3 | epargne -->
                <div class="epargne section hidden">
                    <h1>ÉPARGNE </h1>
                    {% block epargne %} {% endblock %}
                </div>

                <!-- Section 4 | objectifs -->
                <div class="objectifs section hidden">
                    <h1>OBJECTIFS </h1>
                    {% block objectifs %} {% endblock %}
                </div>

                <!-- Section 5 | resultats -->
                <div class="resultats section hidden">
                    <h1>RÉSULTATS </h1>
                    {% block resultats %} {% endblock %}
                </div>


                <div class="button">
                    <a><button onClick="pagePrecedente()" class="precedent hidden">Précédent</button></a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block javascript %}
 /*
        function changerElement(section){
            hidden = document.getElementsByClassName(section);
            show = document.getElementsByClassName(section);

        }

        function afficherConsole(section, hidden, show){
            console.log(section);
            console.log(hidden);
            console.log(show);
        }

        function sectionSuivante(section, section_precedente){ //CSS modification

            $("." + section_precedente).css("display", "none"); // Enleve la partie d'avant
            $("." + section).css("display", "inherit"); // Affiche la page d'après
        }

        function naviguationSuivante(section){ // CSS modification

            $("." + section + "_naviguation").addClass("active"); // Changement de la boule (Grâce à ACTIVE)
            $("." + section + "_separation").addClass("active"); // Changement de la séparation
            $(".precedent").addClass("show").removeClass("hidden"); // Affiche le bouton pour retourner en arrière
        }



        var suivant = 2;
        var situation = "situation";
        var patrimoine = "patrimoine";
        var epargne = "epargne";
        var objectifs = "objectifs";
        var resultats = "resultats";

        /**
         * La fonction suivant() s'occupe d'afficher la nouvelle partie du questionnaire
         */
           /* function pageSuivante(){
            /*Sélection de votre page */
            /*switch(suivant){
                case 1: /* Situation */
                   /* changerElement(situation);
                    sectionSuivante(situation, resultats);
                    naviguationSuivante(situation);
                    afficherConsole(situation);
                    break;
                case 2: /* Patrimoine */
                   /* changerElement(patrimoine);
                    sectionSuivante(patrimoine, situation);
                    naviguationSuivante(patrimoine);
                    afficherConsole(patrimoine);
                    break;
                case 3: /* Epargne */
                 /*   changerElement(epargne);
                    sectionSuivante(epargne, patrimoine);
                    naviguationSuivante(epargne);
                    afficherConsole(epargne);
                    break;
                case 4: /* Objectifs */
                   /* changerElement(objectifs);
                    sectionSuivante(objectifs, epargne);
                    naviguationSuivante(objectifs);
                    afficherConsole(objectifs);
                    break;
                case 5: /* Résultat */
                    /*changerElement(resultats);
                    sectionSuivante(objectifs, resultats);
                    naviguationSuivante(resultats);
                    afficherConsole(resultats);
                    break;
                default:
                    suivant = 0;
                    break;
            }

            suivant += 1;
            return suivant;
        }


        /**
         * La fonction precedent() s'occupe d'afficher la partie précédente du questionnaire
         */
      /* function pagePrecedente(){
            suivant -= 2;
            pageSuivante();
            return suivant;


        }

{% endblock %}

Answer 1

Я рекомендую вам использовать CraueFormFlowBundle , чтобы легко обрабатывать многоэтапные потоки форм.

Он имеет очень приятные функции, и настройка - это просто.

Они предоставляют некоторые примеры потоков форм здесь , где вы также можете получить доступ к исходным кодам примеров.