Po latach polegania na pakietach stron trzecich, walki z przechowywaniem sesji i pisaniu skomplikowanej logiki kontrolera w celu obsługi "przewodników", Symfony 7.4 dostarczyła jedną z najbardziej pożądanych funkcji w historii ramki: . Native Multi-Step Forms Jeśli pracowałeś z Symfony od dziesięciu lat, jak ja, znasz walkę. Potrzebujesz kreatora rejestracji, złożonego procesu rozliczeniowego lub wielostopniowego sondażu. Miałeś dwa wybory: logikę sterownika zaatakowanego razem z ręcznymi grupami walidacji lub legendarną Chociaż Craue dobrze nam służył, zawsze była to zależność zewnętrzna, która czuła się lekko odłączona od filozofii podstawowego składnika Form. CraueFormFlowBundle Wraz z wydaniem Symfony 7.4 w listopadzie 2025 r. zespół Core Team wprowadził Form Flows. To nie jest tylko klasa pomocnicza; jest to kompletna zmiana paradygmatu, która traktuje wielostopniowy przepływ jako pierwszorzędnego obywatela, w pełni zintegrowany z komponentami Validator i Form. W tym artykule, będziemy budować gotowy do produkcji Wizard Użytkownika Onboarding za pomocą Symfony 7.4. będziemy obejmować wszystko od instalacji do zaawansowanego zarządzania stanem, korzystając tylko z native bibliotek dostarczonych przez ramę. Ewolucja form w Symfonii 7.4 Zanim napiszemy kod, zrozummy, dlaczego ta aktualizacja ma znaczenie. W poprzednich wersjach formularz był pojedynczą jednostką pracy. Wysłaliście go, zweryfikowaliście i spłukaliście. Aby to rozbić, deweloperzy musieli sztucznie pokroić model danych i ręcznie zarządzać stanem między żądaniami. , i Ręczne przechowywanie postępu sesji. step 1 step 2, step 3 Symfonia 7.4 wprowadza Pomyśl o tym jako o " Zarządza cyklem życia całego procesu, automatycznie obsługuje nawigację (Next, Previous, Skip), grupy walidacji i utrzymanie danych. AbstractFlowType Form of Forms Użytkownik onboarding Tworzymy kreatora wdrożenia dla platformy SaaS. Składa się on z trzech odrębnych kroków: 
 
 
 
 Identyfikator: Podstawowe dane użytkownika (Email, Hasło). Profil: Szczegóły zawodowe (tytuł pracy, firma) Plan: Wybór subskrypcji (Free, Pro, Enterprise) Będziemy korzystać z Jest to najlepsza praktyka we współczesnym rozwoju Symfonii, unikając problemu „Anemic Domain Model”, w którym jednostki są zagubione tymczasowymi danymi formularza. Data Transfer Object (DTO) Obiekty przesyłania danych (DTO) DTO działa jako kręgosłup naszego przepływu. Zwróć uwagę na użycie atrybutów do walidacji. W Symfonii 7.4 komponent Form Flow automatycznie wykorzystuje To jest zmieniacz gry; nie potrzebujemy już kompleksów i zamknięcia. 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';
}
 zauważa , Odpowiadają one dokładnie nazwom kroków, które zdefiniujemy później. groups: [‘identity’] groups: [‘profile’] Tworzenie form kroków Potrzebujemy standardu Są to standardowe formy symfonii; nie ma w nich nic „specjalnego”, co sprawia, że są one wielokrotne. 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,
        ]);
    }
}
 Typ przepływu (The Magic) W tym miejscu Symfony 7.4 świeci. Rozszerzamy się Korzystamy również z nowych . 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',
        ]);
    }
}
 o jest nowym typem kompozytowym w Symfony 7.4. abstraktuje przyciski. domyślnie wyświetla: NavigatorFlowType 
 
 
 
 Następny (na wszystkich etapach z wyjątkiem ostatniego) Poprzedni (na wszystkich etapach oprócz pierwszego) Zakończenie (na ostatnim kroku) Możesz to dostosować! Na przykład, jeśli chcesz zezwolić na pominięcie kroku: $builder->add('navigator', NavigatorFlowType::class, [
    'buttons' => [
        'next' => ['label' => 'Continue'],
        'finish' => ['label' => 'Complete Setup'],
    ]
]);
 Kontrolerzy Minęły czasy ręcznego sprawdzania parametrów zapytania $step lub kluczy sesji. kontroler wygląda szokująco podobnie do standardowego kontrolera CRUD. //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);
    }
}
 W trybie domyślnym, The jest bezpaństwowy w tym sensie, że opiera się na danych Jednak dla lepszego życia, . 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 Jeśli masz do czynienia z podmiotami, które nie mogą być łatwo serializowane, możesz użyć transformatora danych lub polegać na Aby utrzymać wskaźnik ważny. step_property_path Świątynia W tym miejscu guma spotyka się z drogą. Musimy wyświetlić formularz. Zmienny formularz przekazany do szablonu jest widokiem formularza bieżącego kroku. {% 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 %}
 o Pole zazwyczaj wyświetla się jako grupa przycisków. Możesz chcieć dostosować wyświetlanie poprzez utworzenie niestandardowego motywu formularza, jeśli chcesz określone klasy (takie jak klasy narzędzia Tailwind) na przyciskach Poprzednie vs Następne. navigator NavigatorFlowType Aby stylizować przyciski specjalnie bez motywu, możesz uzyskać do nich bezpośredni dostęp, jeśli wiesz, że istnieją: <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>
 Zaawansowane: kroki warunkowe Co jeśli chcemy krok, jeśli użytkownik wprowadzi firmowy adres e-mail? skip the “Profile” w Możemy skorzystać z opcja na etapie definicji. Symfonia 7.4 jest mocna. UserOnboardingFlowType include_if addStep Wspólny wzorzec kontroluje dane w ? Nie, buildFormFlow jest zbudowany raz. Zamiast tego możemy użyć   , lub po prostu logika w kontrolerze. Ale najczystszym sposobem w 7.4 jest użycie w metodzie addStep, która akceptuje zamknięcie. buildFormFlow EventListeners inside the Flow skip option Począwszy od początkowego wydania 7.4, logika dynamicznego pomijania jest często najlepiej obsługiwana przez logiczne lub słuchanie w poprzednim kroku, aby ręcznie zmodyfikować właściwość currentStep, jeśli to konieczne. Metoda wspiera a w niektórych wdrożeniach. NavigatorFlowType FormEvents::POST_SUBMIT addStep condition Sprawdźmy standardowe podejście do logiki warunkowej. Standardowe wdrożenie Symfony 7.4 zaleca użycie logiki przejścia. Jeśli potrzebujesz bardzo dynamicznych przepływów (takich jak „Wybierz własną przygodę”), możesz pominąć logiki, ale dla prostego pominięcia, możemy po prostu domyślnie ustawić pola na nieodwołalne i ukryć je. getStepForm Jednak bardziej wytrzymałym sposobem dostarczanym przez nowy komponent jest wykorzystanie . Transition System o oblicza następny krok w oparciu o kolejność array. Jeśli musisz przeskoczyć, możesz zmodyfikować w a Słuchacze z . 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.
    }
});
 Najprostszym sposobem w 7.4 jest po prostu umożliwienie użytkownikowi kliknięcia "Dalej" i upewnienie się, że grupy walidacji back-end dla pominiętego kroku nie są wyzwalane. Dlaczego jest to lepsze niż CraueFormFlowBundle. 
 
 
 
 
 Native Integration: Nie ma już walki z sterownikiem pamięci sesyjnej pakietu. używa standardowych map danych formularza. Atrybuty walidacji: mapowanie nazwy kroku -> grupy walidacji zmniejsza konfigurację boilerplate o 50%. Bezpieczeństwo typu: Wszystko jest mocno wpisywane. AbstractFlowType zapewnia przestrzeganie umowy. Twig Simplicity: brak logiki flow.currentStepNumber w Twig. Czy to działa? Aby upewnić się, że wdrożenie jest solidne, wykonaj następujące kroki weryfikacji: 
 
 
 
 
 Test izolacji kroku: Wypełnij Krok 1, kliknij Następny. Przeładuj stronę. Powinieneś nadal być na Krok 2 (jeśli sesja jest aktywna) lub być w stanie poradzić sobie z naturą bezpaństwową. Brama weryfikacji: Spróbuj kliknąć „Dalej” na kroku 1 z pustym e-mailem. Izolacja grupy: Dodaj wymóg do Krok 2. spróbuj przesłać Krok 1. błąd Krok 2 nie powinien jeszcze pojawić się. Ukończenie: Ukończenie przepływu. Sprawdź swoją bazę danych lub odłóż DTO w kontrolerze. Upewnij się, że dane z kroku 1 (Email) utrzymują się do ostatecznego przesłania. konkluzje Funkcja Multi-Step Forms w Symfony 7.4 to ogromny skok naprzód dla programu Developer Experience (DX), który zajmuje się złożonym, powtarzającym się problemem i rozwiązuje go z elegancją, jakiej oczekiwaliśmy od zespołu Symfony Core. poprzez wykorzystanie i naturalną synergię z Możesz usunąć setki wierszy spaghetti z kontrolerów. AbstractFlowType Validator Budowa skomplikowanych magów nie jest już zadaniem – jest to standardowy, przyjemny element ekosystemu Symfony. Czy planujesz odtworzyć swoje legacy wizjerów do Symfony 7.4? chciałbym usłyszeć o swoich doświadczeniach z migracją. Skontaktuj się z nami na 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

Ten dźwięk jest produkowany w oryginalnym języku historii!

Symfonia 7.4: Jak opanować formy wielostopniowe

About Author

UWAGI

ZAWIEŚĆ TAGI

ARTYKUŁ TEN ZOSTAŁ PREZENTOWANY W

Related Stories

Everything You Need to Know About HackerNoon’s Proof of Usefulness Hackathon

Verified Writers

Leadzai - The Startup of the Year that Democratizes Access to Online Advertising

From Desk to HackerNoon: Your Ultimate Guide on How to Publish a Story

Everything You Need to Know About HackerNoon’s Proof of Usefulness Hackathon

Verified Writers

Leadzai - The Startup of the Year that Democratizes Access to Online Advertising

From Desk to HackerNoon: Your Ultimate Guide on How to Publish a Story

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps