Après des années de dépendance aux paquets tiers, de lutte contre le stockage de session et d’écriture de logique de contrôleur compliquée pour gérer les « guides », Symfony 7.4 a livré l’une des fonctionnalités les plus demandées de l’histoire du framework : . Native Multi-Step Forms Si vous travaillez avec Symfony depuis une décennie, comme moi, vous connaissez la lutte. Vous avez besoin d'un assistant d'enregistrement, d'un processus de paiement complexe ou d'une enquête à plusieurs étapes. Vous aviez deux choix: la logique du contrôleur piraté avec des groupes de validation manuelle ou le légendaire Même si Craue nous a bien servi, c’était toujours une dépendance extérieure qui se sentait légèrement déconnectée de la philosophie de la composante fondamentale de la forme. CraueFormFlowBundle Avec la sortie de Symfony 7.4 en novembre 2025, l’équipe centrale a introduit Form Flows.Ce n’est pas seulement une classe d’aide; c’est un changement de paradigme complet qui traite un flux en plusieurs étapes comme un citoyen de première classe, entièrement intégré aux composants de Validator et Form. Dans cet article, nous allons construire un assistant d'installation d'utilisateur prêt à la production en utilisant Symfony 7.4. Nous couvrirons tout, de l'installation à la gestion d'état avancée, en utilisant uniquement les bibliothèques natives fournies par le cadre. L'évolution des formes dans la Symphonie 7.4 Avant d’écrire du code, comprenons pourquoi cette mise à jour est importante. Dans les versions précédentes, un formulaire était une seule unité de travail. Vous l'avez soumis, validé et rinçé. Pour rompre cela, les développeurs ont dû trancher artificiellement le modèle de données et gérer manuellement l'état entre les demandes. , à et Enregistrer manuellement le déroulement de la session. step 1 step 2, step 3 Symphony 7.4 introduit le Pensez à cela comme à un « Il gère le cycle de vie de l’ensemble du processus, gère automatiquement la navigation (Next, Previous, Skip), les groupes de validation et la persistance des données. AbstractFlowType Form of Forms Utilisateur Onboarding Nous construisons un assistant d'installation pour une plate-forme SaaS. Il se compose de trois étapes distinctes: 
 
 
 
 Identité : Données de base de l’utilisateur (email, mot de passe). Profil : Détails professionnels (Titre de travail, Société). Plan : sélection d’abonnement (Free, Pro, Enterprise) Nous utiliserons une Ceci est une meilleure pratique dans le développement moderne de Symphony, en évitant le problème du « Modèle de domaine anémique » où les entités sont confuses avec des données de formulaire temporaires. Data Transfer Object (DTO) L’objet de transfert de données (DTO) Le DTO agit comme l'épine dorsale de notre flux. Notez l'utilisation d'attributs pour la validation. Dans Symphony 7.4, le composant Form Flow utilise automatiquement le C'est un changement de jeu; nous n'avons plus besoin de complexes des fermetures. 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';
}
 Notes , à Ceux-ci correspondent exactement aux noms des étapes que nous définirons plus tard. groups: [‘identity’] groups: [‘profile’] Créer des formes de pas Nous avons besoin de normes Ce sont des formes symphoniques standard; il n’y a rien de « spécial » à leur sujet, ce qui les rend réutilisables. 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,
        ]);
    }
}
 Le type de flux (la magie) C’est là que Symfony 7.4 brille. Nous allons étendre Nous utilisons également le nouveau . 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',
        ]);
    }
}
 Le est un nouveau type composite dans Symfony 7.4. Il abstrait les boutons. Par défaut, il rend: NavigatorFlowType 
 
 
 
 Suivant (sur toutes les étapes sauf la dernière) Précédent (sur toutes les étapes sauf la première) Finish (sur la dernière étape) Vous pouvez personnaliser cela! Par exemple, si vous voulez autoriser le saut d'une étape: $builder->add('navigator', NavigatorFlowType::class, [
    'buttons' => [
        'next' => ['label' => 'Continue'],
        'finish' => ['label' => 'Complete Setup'],
    ]
]);
 Le contrôleur Les jours de la vérification manuelle des paramètres de la requête $step ou des clés de session sont passés.Le contrôleur ressemble étonnamment à un contrôleur CRUD standard. //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);
    }
}
 Par défaut, le est indépendante dans le sens où elle repose sur les données Cependant, pour une meilleure performance, . 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 Si vous avez affaire à des entités qui ne peuvent pas être facilement sérialisées, vous voudrez peut-être utiliser un transformateur de données ou compter sur Maintenir le pointeur valide. step_property_path Le Temple C'est là que le caoutchouc rencontre le chemin. Nous devons rendre le formulaire. La forme variable passée au modèle est la vue de formulaire de l'étape actuelle. {% 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 %}
 Le Le champ rend généralement en tant que groupe de boutons. Vous voudrez peut-être personnaliser le rendu en créant un thème de formulaire personnalisé si vous voulez des classes spécifiques (comme les classes d'utilitaire Tailwind) sur les boutons Précédent vs Suivant. navigator NavigatorFlowType Pour styliser les boutons spécifiquement sans thème, vous pouvez y accéder directement si vous savez qu’ils existent : <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>
 Étiquette : conditionnel Et si nous voulions Étape si l'utilisateur entre une adresse e-mail d'entreprise? skip the “Profile” dans Nous pouvons utiliser le La définition de l’étape, cependant, La Symphonie 7.4 est très puissante. UserOnboardingFlowType include_if addStep Un modèle commun vérifie les données dans le Non, buildFormFlow est construit une fois. Au lieu de cela, nous pouvons utiliser   , ou simplement la logique à l'intérieur du contrôleur. Mais la façon la plus propre dans 7.4 est d'utiliser dans la méthode addStep, qui accepte une fermeture. buildFormFlow EventListeners inside the Flow skip option À partir de la sortie initiale 7.4, la logique de saut dynamique est souvent mieux gérée par la logique ou en écoutant l'étape précédente pour modifier manuellement la propriété actuelle, si nécessaire. La méthode soutient a utilisables dans certaines applications. NavigatorFlowType FormEvents::POST_SUBMIT addStep condition La mise en œuvre standard de Symfony 7.4 recommande d’utiliser la logique de transition. Si vous avez besoin de flux hautement dynamiques (comme un « Choisissez votre propre aventure »), vous pourriez supprimer la logique, mais pour un simple saut, nous pouvons simplement désactiver les champs par défaut et les masquer. getStepForm Cependant, un moyen plus robuste fourni par le nouveau composant est d'utiliser le . Transition System Le Calcule la prochaine étape en fonction de l'ordre de l'array. Si vous avez besoin de sauter, vous pouvez modifier la dans A L’écoute de la . 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.
    }
});
 Le moyen le plus simple dans 7.4 est de simplement permettre à l’utilisateur de cliquer sur « Suivant » et de s’assurer que les groupes de validation de back-end pour l’étape oubliée ne sont pas déclenchés. Pourquoi c'est mieux que CraueFormFlowBundle. 
 
 
 
 
 Intégration native : plus de combat avec le pilote de stockage de session du bundle. Il utilise les cartographies de données de formulaire standard. Attributs pour la validation: La cartographie de nom de étape -> groupe de validation réduit la configuration de boilerplate de 50%. Sécurité de type : Tout est fortement typé. AbstractFlowType assure que vous respectez le contrat. Twig Simplicity: Pas plus de logique flow.currentStepNumber dans Twig. Vous rendrez simplement la forme que vous avez donnée. ça fonctionne ? Pour vous assurer que votre mise en œuvre est robuste, suivez ces étapes de vérification : 
 
 
 
 
 Test d'isolation de l'étape : Remplissez l'étape 1, cliquez sur Suivant. Reload la page. Vous devriez toujours être sur l'étape 2 (si la persistance de la session est active) ou être en mesure de gérer la nature sans état. Validation Gate: Essayez de cliquer sur « Suivant » sur l’étape 1 avec un e-mail vide. Isolation de groupe: Ajoutez une exigence à l'étape 2. essayez de soumettre l'erreur de l'étape 1. Completation: Terminez le flux. Vérifiez votre base de données ou déposez le DTO dans le contrôleur. Assurez-vous que les données de l'étape 1 (Email) persistent jusqu'à la soumission finale. Les conclusions La fonctionnalité Multi-Step Forms de Symfony 7.4 est un grand pas en avant pour l'expérience des développeurs (DX). Il prend un problème complexe et récurrent et le résout avec l'élégance que nous attendons de l'équipe Symfony Core. par le levier La synergie naturelle avec les Composant, vous pouvez supprimer des centaines de lignes de code spaghetti de vos contrôleurs. AbstractFlowType Validator Construire des sorciers complexes n’est plus une tâche – c’est une partie standard et agréable de l’écosystème Symfony. Vous prévoyez de refactoriser vos sorciers héritiers pour Symfony 7.4 ? Prenez contact avec nous sur 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

Cet audio est produit dans la langue originale de l'histoire !

Symphony 7.4: Comment maîtriser les formulaires en plusieurs étapes

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps