Na jaren van vertrouwen op bundels van derden, worstelen met sessieopslag, en het schrijven van gecompliceerde controllerlogica om "wizards" te behandelen, heeft Symfony 7.4 een van de meest gevraagde functies in de geschiedenis van het framework geleverd: . Native Multi-Step Forms Als je al een decennium met Symfony hebt gewerkt, zoals ik, weet je de strijd. Je hebt een registratie wizard, een complex checkoutproces of een multi-stage enquête nodig. Je had twee keuzes: hacked-together controller logica met handmatige validatiegroepen of de legendarische Hoewel Craue ons goed diende, was het altijd een externe afhankelijkheid die zich enigszins ontkoppeld voelde van de filosofie van de kerncomponent van de vorm. CraueFormFlowBundle Met de release van Symfony 7.4 in november 2025 heeft het Core Team Form Flows geïntroduceerd.Dit is niet alleen een helperklasse; het is een complete paradigmaverschuiving die een multi-stap flow behandelt als een eersteklas burger, volledig geïntegreerd met de Validator- en Form-componenten. In dit artikel gaan we een productie-ready User Onboarding Wizard bouwen met Symfony 7.4. we zullen alles dekken, van installatie tot geavanceerd state management, met alleen de native bibliotheken die door het framework worden verstrekt. De evolutie van vormen in Symfonie 7.4 Voordat we code schrijven, laten we begrijpen waarom deze update belangrijk is. In eerdere versies was een formulier een enkele eenheid van werk. U hebt het ingediend, gevalideerd en gespoeld. Om dit te breken, moesten ontwikkelaars het gegevensmodel kunstmatig snijden en de toestand tussen verzoeken handmatig beheren. - het en handmatig de voortgang van de sessie opslaan. step 1 step 2, step 3 Symfony 7.4 introduceert de Denk aan dit als een " Het beheert de levenscyclus van het hele proces, beheert navigatie (Volgende, Vorige, Skip), validatiegroepen en gegevenspersistentie automatisch. AbstractFlowType Form of Forms Enterprise gebruikers onboarding We bouwen een onboarding wizard voor een SaaS-platform. Het bestaat uit drie verschillende stappen: 
 
 
 
 Identiteit: basisgegevens van de gebruiker (e-mail, wachtwoord). Profiel: Professionele details (Job titel, bedrijf) Plan: Selectie van abonnement (Free, Pro, Enterprise) We gebruiken een Dit is een beste praktijk in de moderne ontwikkeling van Symfony, het vermijden van het "Anemic Domain Model" probleem waar entiteiten verward zijn met tijdelijke formuliergegevens. Data Transfer Object (DTO) Het Data Transfer Object (DTO) De DTO fungeert als de ruggengraat van onze flow. Let op het gebruik van attributen voor validatie. In Symfony 7.4 gebruikt de Form Flow-component automatisch de . This is a game-changer; we no longer need complex  De sluiting. current step name as the validation group validation_groups //src/Form/Dto/UserOnboarding.php
namespace App\Form\Dto;

use Symfony\Component\Validator\Constraints as Assert;

class UserOnboarding
{
    // We need a property to track the current step.
    // The flow component will read/write to this.
    public string $currentStep = 'identity';

    // -- Step 1: Identity --
    
    #[Assert\NotBlank(groups: ['identity'])]
    #[Assert\Email(groups: ['identity'])]
    public ?string $email = null;

    #[Assert\NotBlank(groups: ['identity'])]
    #[Assert\PasswordStrength(minScore: 2, groups: ['identity'])]
    public ?string $password = null;

    // -- Step 2: Profile --

    #[Assert\NotBlank(groups: ['profile'])]
    #[Assert\Length(min: 2, groups: ['profile'])]
    public ?string $fullName = null;

    #[Assert\NotBlank(groups: ['profile'])]
    public ?string $jobTitle = null;

    #[Assert\IsTrue(message: "You must agree to terms.", groups: ['profile'])]
    public bool $termsAccepted = false;

    // -- Step 3: Plan --

    #[Assert\NotBlank(groups: ['plan'])]
    #[Assert\Choice(choices: ['free', 'pro', 'enterprise'], groups: ['plan'])]
    public string $plan = 'free';
}
 Opmerking - het Deze komen precies overeen met de stapnamen die we later zullen definiëren. groups: [‘identity’] groups: [‘profile’] Het bouwen van de stappen vormen We hebben standaard nodig Dit zijn standaard Symfonie vormen; er is niets "special" over hen, wat hen herbruikbaar maakt. AbstractType Identity Step //src/Form/Step/IdentityStepType.php
namespace App\Form\Step;

use App\Form\Dto\UserOnboarding;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class IdentityStepType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('email', EmailType::class, [
                'label' => 'Work Email',
                'attr' => ['placeholder' => 'you@company.com']
            ])
            ->add('password', PasswordType::class, [
                'label' => 'Choose a Password',
                'always_empty' => false,
            ]);
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => UserOnboarding::class,
            // We do NOT set validation_groups here. The Flow handles it.
        ]);
    }
}
 Profile Step //src/Form/Step/ProfileStepType.php

namespace App\Form\Step;

use App\Form\Dto\UserOnboarding;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class ProfileStepType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('fullName', TextType::class, ['label' => 'Full Name'])
            ->add('jobTitle', TextType::class, ['label' => 'Job Title'])
            ->add('termsAccepted', CheckboxType::class, [
                'label' => 'I agree to the Terms of Service',
                'required' => false, // Handled by validator
            ]);
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => UserOnboarding::class,
        ]);
    }
}
 Plan Step //src/Form/Step/PlanStepType.php

namespace App\Form\Step;

use App\Form\Dto\UserOnboarding;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class PlanStepType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('plan', ChoiceType::class, [
                'choices' => [
                    'Free Tier' => 'free',
                    'Pro ($29/mo)' => 'pro',
                    'Enterprise' => 'enterprise',
                ],
                'expanded' => true, // Radio buttons
                'label' => 'Select your plan'
            ]);
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => UserOnboarding::class,
        ]);
    }
}
 Het type stroom (de magie) Dit is waar Symfony 7.4 schijnt. Wij verlengen We gebruiken ook de nieuwe . AbstractType AbstractFlowType FormFlowBuilderInterface //src/Form/Flow/UserOnboardingFlowType.php
namespace App\Form\Flow;

use App\Form\Dto\UserOnboarding;
use App\Form\Step\IdentityStepType;
use App\Form\Step\PlanStepType;
use App\Form\Step\ProfileStepType;
use Symfony\Component\Form\Flow\AbstractFlowType;
use Symfony\Component\Form\Flow\FormFlowBuilderInterface;
use Symfony\Component\Form\Flow\Type\NavigatorFlowType;
use Symfony\Component\OptionsResolver\OptionsResolver;

class UserOnboardingFlowType extends AbstractFlowType
{
    public function buildFormFlow(FormFlowBuilderInterface $builder, array $options): void
    {
        // 1. Add Steps
        // The first argument is the step name (used for validation groups)
        $builder->addStep('identity', IdentityStepType::class);
        $builder->addStep('profile', ProfileStepType::class);
        $builder->addStep('plan', PlanStepType::class);

        // 2. Add Navigation
        // The NavigatorFlowType automatically adds Next, Previous and Finish buttons
        $builder->add('navigator', NavigatorFlowType::class);
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => UserOnboarding::class,
            // Crucial: Tell Symfony which property holds the current step name
            'step_property_path' => 'currentStep',
        ]);
    }
}
 The  is een nieuw samengesteld type in Symfony 7.4. Het abstracteert de knoppen. NavigatorFlowType 
 
 
 
 Volgende (op alle stappen behalve de laatste) Voorgaande (op alle stappen behalve de eerste) Beëindigen (op de laatste stap) U kunt dit aanpassen! Als u bijvoorbeeld een stap wilt overslaan: $builder->add('navigator', NavigatorFlowType::class, [
    'buttons' => [
        'next' => ['label' => 'Continue'],
        'finish' => ['label' => 'Complete Setup'],
    ]
]);
 De controller Gone zijn de dagen van het handmatig controleren van $step query parameters of sessie sleutels. //src/Controller/OnboardingController.php
namespace App\Controller;

use App\Form\Dto\UserOnboarding;
use App\Form\Flow\UserOnboardingFlowType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

class OnboardingController extends AbstractController
{
    #[Route('/onboarding', name: 'app_onboarding')]
    public function __invoke(Request $request): Response
    {
        // 1. Initialize your DTO
        $dto = new UserOnboarding();
        
        // 2. Create the Flow Form
        // This inspects the Request and automatically determines the current step
        $flow = $this->createForm(UserOnboardingFlowType::class, $dto);
        
        $flow->handleRequest($request);

        // 3. Check for completion
        // isFinished() checks if the 'finish' button was clicked AND the final step is valid
        if ($flow->isSubmitted() && $flow->isValid() && $flow->isFinished()) {
            
            // At this point, $dto is fully populated and validated across ALL steps
            $this->saveUser($dto);

            return $this->redirectToRoute('app_dashboard');
        }

        // 4. Render the specific step
        // do NOT use createView(). Use getStepForm() to get the view for the current step.
        return $this->render('onboarding/flow.html.twig', [
            'form' => $flow->getStepForm(),
        ]);
    }

    private function saveUser(UserOnboarding $dto): void
    {
        // Logic to persist User entity, create Stripe customer, etc.
        // dd($dto);
    }
}
 Door de standaard, de staatloos is in de zin dat het afhankelijk is van de gegevens . However, for a better UX,  . Wait, where is the Session? AbstractFlowType POSTed back and forth Symfony 7.4 automatically integrates with the standard HTTP Session if your DTO is serializable Als u zich bezighoudt met entiteiten die niet gemakkelijk serialiserbaar zijn, wilt u mogelijk een Data Transformer gebruiken of vertrouwen op de Om de pointer geldig te houden step_property_path De tempel Hier ontmoet de rubber de weg. We moeten het formulier weergeven. Het variabele formulier dat aan de sjabloon is doorgegeven, is de formulierweergave van de huidige stap. {% extends 'base.html.twig' %}

{% block title %}Onboarding Step: {{ form.vars.name|capitalize }}{% endblock %}

{% block body %}
<div class="container mx-auto max-w-lg mt-10">
    <h1 class="text-2xl font-bold mb-5">Welcome Aboard</h1>
    
    {# Progress Indicator (Optional) #}
    <div class="mb-6 flex justify-between text-sm text-gray-500">
        <span class="{{ form.vars.name == 'identity' ? 'font-bold text-blue-600' : '' }}">Identity</span>
        <span>&rarr;</span>
        <span class="{{ form.vars.name == 'profile' ? 'font-bold text-blue-600' : '' }}">Profile</span>
        <span>&rarr;</span>
        <span class="{{ form.vars.name == 'plan' ? 'font-bold text-blue-600' : '' }}">Plan</span>
    </div>

    {{ form_start(form) }}
        
        {# Render errors for the whole form #}
        {{ form_errors(form) }}

        {# Render the fields for the CURRENT step #}
        {# The 'navigator' field is technically a nested form containing buttons #}
        
        <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            {% for child in form %}
                {% if child.vars.name != 'navigator' %}
                    {{ form_row(child, {'attr': {'class': 'mb-4'}}) }}
                {% endif %}
            {% endfor %}
        </div>

        {# Render Navigation Buttons #}
        <div class="flex justify-between items-center">
            {# The navigator contains 'previous', 'next', 'finish' depending on the step #}
            {{ form_widget(form.navigator) }}
        </div>

    {{ form_end(form) }}
</div>
{% endblock %}
 De Het veld wordt meestal weergegeven als een groep knoppen. U wilt mogelijk de weergave van door een aangepast formulierthema te maken als u specifieke klassen wilt (zoals Tailwind-hulpprogramma-klassen) op de knoppen Vorige vs. Volgende. navigator NavigatorFlowType Om de knoppen specifiek zonder thema te stylen, kunt u ze rechtstreeks openen als u weet dat ze bestaan: <div class="flex justify-between">
    {% if form.navigator.previous is defined %}
        {{ form_widget(form.navigator.previous, {'attr': {'class': 'btn-secondary'}}) }}
    {% endif %}
    
    {% if form.navigator.next is defined %}
        {{ form_widget(form.navigator.next, {'attr': {'class': 'btn-primary'}}) }}
    {% endif %}
    
    {% if form.navigator.finish is defined %}
        {{ form_widget(form.navigator.finish, {'attr': {'class': 'btn-success'}}) }}
    {% endif %}
</div>
 Geavanceerd: voorwaardelijke stappen Wat als we willen Stap als de gebruiker een bedrijfs-e-mailadres invoert? skip the “Profile” in We kunnen het gebruik van de optie op de stap definitie. echter, In Symfony 7.4 is het robuust. UserOnboardingFlowType include_if addStep Een gemeenschappelijk patroon controleert gegevens in de ? Nee, buildFormFlow wordt één keer gebouwd.   , of gewoon logica binnen de controller. Maar de zuiverste manier in 7.4 is het gebruik van de in de addStep-methode, die een sluiting accepteert. buildFormFlow EventListeners inside the Flow skip option Vanaf de eerste 7.4-release wordt de dynamische skip-logica vaak het best beheerd door de Logisch of luisteren naar op de vorige stap om de eigenschap currentStep handmatig te wijzigen indien nodig. De methode ondersteunt a in sommige implementaties te gebruiken. NavigatorFlowType FormEvents::POST_SUBMIT addStep condition Laten we de standaardbenadering voor voorwaardelijke logica controleren. De standaardimplementatie van Symfony 7.4 beveelt het gebruik van de overgangslogica aan. Als u zeer dynamische stromen nodig hebt (zoals een "Kies uw eigen avontuur"), kunt u de logica, maar voor eenvoudig overslaan, kunnen we gewoon standaardvelden resetbaar maken en verbergen. getStepForm Echter, een meer robuuste manier die door de nieuwe component wordt verstrekt, is om de . Transition System De berekent de volgende stap op basis van de volgorde van de matrix. Als u moet springen, kunt u de volgorde van het gegevensobject wijzigen In de a luisteraar van de . NavigatorFlowType currentStep POST_SUBMIT IdentityStepType // In IdentityStepType
$builder->addEventListener(FormEvents::POST_SUBMIT, function (FormEvent $event) {
    $data = $event->getData();
    $form = $event->getForm();
    
    if (str_ends_with($data->email, '@corp.com')) {
        // This requires the parent flow to recognize the jump, 
        // usually handled by the navigator looking at the set step.
        // For simple implementations, just ensure your validation groups 
        // don't block empty fields in the skipped step.
    }
});
 De eenvoudigste manier in 7.4 is om eenvoudig de gebruiker toe te staan om op “Volgende” te klikken en ervoor te zorgen dat de back-end validatiegroepen voor de overgeslagen stap niet worden geactiveerd. Waarom dit beter is dan CraueFormFlowBundle. 
 
 
 
 
  No more fighting with the bundle’s session storage driver. It uses the standard Form data mappers. Native Integration: Attributen voor Validatie: Door de map van stapnaam -> validatiegroep wordt de boilerplate-configuratie met 50% verminderd. Type Veiligheid: Alles is sterk getypt. AbstractFlowType zorgt ervoor dat u zich aan het contract houdt. Twig Simplicity: Geen meer flow.currentStepNumber logica in Twig. Werkt het dan? Om ervoor te zorgen dat uw implementatie robuust is, volgt u deze verificatie stappen: 
 
 
 
 
 Stap Isolatie Test: Vul Stap 1, klik op Volgende. Laad de pagina opnieuw. U moet nog steeds op Stap 2 (als sessiepersistentie actief is) of in staat zijn om de staatloze aard te verwerken. Validatiepoort: Probeer op “Volgende” te klikken op Stap 1 met een lege e-mail. Groepsisolatie: Voeg een vereiste toe aan Stap 2.Probeer Stap 1 in te dienen.De Stap 2 fout mag nog niet verschijnen. Voltooiing: Voltooi de stroom. Controleer uw database of dump de DTO in de controller. Zorg ervoor dat de gegevens van Stap 1 (E-mail) doorgaan tot de uiteindelijke indiening. Conclusies De Multi-Step Forms-functie van Symfony 7.4 is een enorme sprong voorwaarts voor de Developer Experience (DX). Door te leveren De natuurlijke synergie met de Als component kunt u honderden rijen spaghetti-code van uw controller verwijderen. AbstractFlowType Validator Het bouwen van complexe tovenaars is niet langer een taak - het is een standaard, aangenaam deel van het Symfony-ecosysteem. Ben je van plan om je erfgenaamde wizards te refactoren naar Symfony 7.4? Laten we contact opnemen op LinkedIn: . https://www.linkedin.com/in/matthew-mochalkin/ https://www.linkedin.com/in/matthew-mochalkin/

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Read My Stories

Deze audio wordt geproduceerd in de originele taal van het verhaal!

Symfony 7.4: Hoe multi-step formulieren te beheersen

About Author

OPMERKINGEN

LABELS

DIT ARTIKEL WERD GEPRESENTEERD IN

Related Stories

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps