Después de años de confiar en los paquetes de terceros, luchar con el almacenamiento de sesiones y escribir la lógica del controlador complicada para manejar "magos", Symfony 7.4 ha proporcionado una de las características más solicitadas en la historia del marco: . Native Multi-Step Forms Si has estado trabajando con Symfony durante una década, como yo, conoces la lucha. Necesitas un asistente de registro, un proceso de checkout complejo o una encuesta en varias etapas.Tienes dos opciones: la lógica del controlador hackeado con grupos de validación manual o el legendario Mientras que Craue nos sirvió bien, siempre fue una dependencia externa que se sintió ligeramente desconectada de la filosofía del componente fundamental de la forma. CraueFormFlowBundle Con el lanzamiento de Symfony 7.4 en noviembre de 2025, el Core Team ha introducido Form Flows. Esta no es solo una clase de ayuda; es un cambio de paradigma completo que trata a un flujo multi-paso como un ciudadano de primera clase, totalmente integrado con los componentes de Validador y Form. En este artículo, vamos a construir un asistente de embarque de usuario listo para la producción utilizando Symfony 7.4. cubriremos todo, desde la instalación hasta la gestión avanzada del estado, utilizando sólo las bibliotecas nativas proporcionadas por el marco. La evolución de las formas en la Sinfonía 7.4 Antes de escribir código, entendamos por qué esta actualización importa. En versiones anteriores, un formulario era una única unidad de trabajo. lo enviaste, lo validaste y lo lavaste. Para romper esto, los desarrolladores tuvieron que cortar artificialmente el modelo de datos y gestionar manualmente el estado entre las solicitudes. , de y Guardar manualmente el progreso de la sesión. step 1 step 2, step 3 Symfony 7.4 introduce el Piensa en esto como un “ Gestiona el ciclo de vida de todo el proceso, manejando automáticamente la navegación (Siguiente, Anterior, Pasar), los grupos de validación y la persistencia de datos. AbstractFlowType Form of Forms Desarrollo de usuario onboarding Estamos construyendo un asistente de embarque para una plataforma SaaS. Se compone de tres pasos distintos: 
 
 
 
 Identidad: Datos básicos del usuario (Email, contraseña). Perfil: Detalles profesionales (Título de trabajo, Empresa). Plan: Selección de suscripción (Free, Pro, Enterprise). Nosotros utilizaremos a Esta es una mejor práctica en el desarrollo moderno de Symfony, evitando el problema del “Modelo de dominio anémico” donde las entidades están confundidas con datos de formularios temporales. Data Transfer Object (DTO) Objeto de Transferencia de Datos (DTO) El DTO actúa como la columna vertebral de nuestro flujo. Tenga en cuenta el uso de Atributos para la validación. En Symfony 7.4, el componente Form Flow utiliza automáticamente el Este es un cambio de juego; ya no necesitamos complejos los cierres. 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';
}
 Notas , de Estos corresponden exactamente a los nombres de pasos que definiremos más adelante. groups: [‘identity’] groups: [‘profile’] Construir las formas de paso Necesitamos un estándar Estas son las formas estándar de la Sinfonía; no hay nada “especial” en ellas, lo que las hace reutilizables. 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,
        ]);
    }
}
 El tipo de flujo (The Magic) Este es el lugar donde brilla Symfony 7.4. Nosotros extendemos También utilizamos el nuevo . 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',
        ]);
    }
}
 El es un nuevo tipo compuesto en Symfony 7.4. Abstrae los botones. Por defecto, hace: NavigatorFlowType 
 
 
 
 Siguiente (en todas las etapas excepto la última) Anterior (en todas las etapas excepto la primera) Finalizado (en el último paso) ¡Puede personalizar esto! Por ejemplo, si desea permitir saltar un paso: $builder->add('navigator', NavigatorFlowType::class, [
    'buttons' => [
        'next' => ['label' => 'Continue'],
        'finish' => ['label' => 'Complete Setup'],
    ]
]);
 El controlador Han pasado los días de comprobar manualmente los parámetros de la consulta $step o las claves de sesión.El controlador parece sorprendentemente similar a un controlador CRUD estándar. //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);
    }
}
 Por defecto, el es sin estatus en el sentido de que se basa en los datos Sin embargo, para un mejor uso, . 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 está tratando de entidades que no pueden ser serializadas fácilmente, es posible que desee usar un transformador de datos o confiar en el Mantener el puntero válido. step_property_path El templo Aquí es donde la goma se encuentra con el camino. Necesitamos renderizar el formulario. La forma variable pasada a la plantilla es la vista de formulario del paso actual. {% 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 %}
 El suele renderizar como un grupo de botones. Puede que desee personalizar la renderización de Creando un tema de formulario personalizado si desea clases específicas (como clases de utilidad de Tailwind) en los botones Anterior vs. Siguiente. navigator NavigatorFlowType Para estilizar los botones específicamente sin un tema, puede acceder a ellos directamente si sabe que existen: <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>
 Avanzado: Pasos condicionados ¿Y si queremos paso si el usuario introduce una dirección de correo electrónico corporativa? skip the “Profile” en Podemos utilizar el en la definición del paso. sin embargo, En Symfony 7.4 es robusto. UserOnboardingFlowType include_if addStep Un patrón común está revisando los datos en el No, buildFormFlow se construye una vez. En su lugar, podemos usar   , o simplemente la lógica dentro del controlador.Pero la forma más limpia en 7.4 es en el método addStep, que acepta un cierre. buildFormFlow EventListeners inside the Flow skip option A partir del lanzamiento inicial 7.4, la lógica de salto dinámico a menudo es mejor manejada por la La lógica o la escucha en el paso anterior para modificar la propiedad actualStep manualmente si es necesario. El método apoya a aplicables en algunas aplicaciones. NavigatorFlowType FormEvents::POST_SUBMIT addStep condition Verifiquemos el enfoque estándar para la lógica condicional. La implementación estándar de Symfony 7.4 recomienda usar la lógica de transición. Si necesita flujos altamente dinámicos (como un "Elige su propia aventura"), es posible que supere la la lógica, pero para un simple salto, podemos simplemente rescindir los campos por defecto y ocultarlos. getStepForm Sin embargo, una forma más robusta proporcionada por el nuevo componente es utilizar el . Transition System El Calcula el siguiente paso basado en el orden de la matriz. Si necesita saltar, puede modificar el orden del objeto de datos. En A El escuchador 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.
    }
});
 La forma más sencilla en 7.4 es simplemente permitir que el usuario haga clic en “Siguiente” y asegúrese de que los grupos de validación de back-end para el paso salido no se desencadenen. ¿Por qué es mejor que CraueFormFlowBundle? 
 
 
 
 
 Integración nativa: ya no lucha con el controlador de almacenamiento de sesión del paquete. utiliza los mappers de datos de formulario estándar. Atributos para la validación: El mapeo de nombre de paso -> grupo de validación reduce la configuración de boilerplate en un 50%. Tipo de Seguridad: Todo se escribe con firmeza. AbstractFlowType asegura que usted se adhiere al contrato. Twig Simplicity: No más flow.currentStepNumber lógica en Twig. ¿Funciona eso? Para asegurarse de que su implementación sea robusta, siga estos pasos de verificación: 
 
 
 
 
 Prueba de aislamiento de paso: Rellene el paso 1, haga clic en Siguiente. Reload la página. usted todavía debe estar en el paso 2 (si la persistencia de sesión está activa) o ser capaz de manejar la naturaleza sin estado. Puerta de validación: Trate de hacer clic en “Siguiente” en el paso 1 con un correo electrónico vacío. Aislamiento de grupo: Añade un requisito al paso 2. Trate de enviar el paso 1.El error de paso 2 no debe aparecer todavía. Completamiento: Finalizar el flujo. Compruebe su base de datos o descargue el DTO en el controlador. Asegúrese de que los datos desde el paso 1 (Email) persistan hasta la presentación final. Conclusiones La función Multi-Step Forms de Symfony 7.4 es un gran salto hacia adelante para la Experiencia de Desarrolladores (DX).Toma un problema complejo y recurrente y lo resuelve con la elegancia que hemos venido a esperar del equipo Symfony Core. Por el aprovechamiento La sinergia natural con el Componente, puede borrar cientos de líneas de código de spaghetti de sus controladores. AbstractFlowType Validator Construir magos complejos ya no es una tarea, es una parte estándar y agradable del ecosistema de la Sinfonía. ¿Estás planeando refactorizar tus magos legados en Symfony 7.4? me gustaría saber sobre tu experiencia con la migración. Entra en contacto con nosotros en 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

Este audio es producido en el idioma original de la historia!

Sinfonía 7.4: Cómo dominar los formularios de múltiples pasos

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

El modelo Bitcoin UTXO, impulsando un ecosistema único

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

El modelo Bitcoin UTXO, impulsando un ecosistema único

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps