Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

Mejoras en los formularios de Symfony 6

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $10.00

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

¡Vamos a explorar algunas nuevas características! Hay montones de ellas, y ya hemos visto un montón. No tengo tiempo para mostrar todo, pero afortunadamente, ¡no lo necesito! Si vas a https://symfony.com/blog, las novedades están muy bien documentadas. Haz clic en "Vivir al límite". Aquí puedes ver las entradas del blog que están clasificadas por cada versión. Esta es una colección de entradas de blog sobre las novedades de Symfony 5.1, como el nuevo sistema de seguridad. Y... aquí hay posts sobre las novedades de Symfony 5.3, o de la 5.4 a la 6.0. Así que si quieres profundizar y ver todas las novedades, están muy bien documentadas en estos posts.

Las nuevas características que quiero mostrar ahora mismo tienen que ver con el componente del formulario.

Ordenación de los campos del formulario

Desde Symfony 5.3, tenemos una nueva y bonita característica llamada Ordenación de Campos de Formulario. Si vas a la página de registro, ésta muestra cuatro campos. Abramos la plantilla para ello:templates/registration/register.html.twig. Estoy renderizando todos los campos a mano. Reemplacemos esto por el muy perezoso {{ form_widget(registrationForm) }}... que simplemente vuelca todos los campos en el orden en que se añaden.

... lines 1 - 4
{% block body %}
... lines 6 - 10
{{ form_start(registrationForm) }}
{{ form_widget(registrationForm) }}
... line 13
{{ form_end(registrationForm) }}
... lines 15 - 17
{% endblock %}

Por desgracia... ahora el formulario... tiene un aspecto extraño. Para solucionarlo, abre la clase del tipo de formulario, que es src/Form/RegistrationFormType.php. Cada campo tiene ahora una opción llamada priority. Vamos a añadirla.

Empezando por firstName, pasa null por el tipo para que Symfony siga adivinando. Luego, pon priority a 4, porque quiero que sea el primer campo. email debe ser el segundo campo, así que pasa null de nuevo y pon priority a 3. Luego ponplainPassword a priority de 2... y finalmente pon agreeTerms a priority1 .

... lines 1 - 16
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('email', null, [
'priority' => 3,
])
->add('agreeTerms', CheckboxType::class, [
'priority' => 1,
... lines 25 - 30
])
->add('firstName', null, [
'priority' => 4,
])
->add('plainPassword', PasswordType::class, [
'priority' => 2,
... lines 37 - 52
])
;
}
... lines 56 - 62
}

Y ahora... ¡se ve muy bien! Así que si quieres renderizar perezosamente tus campos, puedes hacerlo... y no tener que preocuparte de que estén en un orden extraño.

Hola renderForm()

Ya que estamos hablando de formularios, abre el controlador de esta página:src/Controller/RegistrationController.php. En Symfony 5.3, cuando renderizas una plantilla y pasas un formulario, ¡hay un nuevo atajo! En lugar de render() direnderForm(). La única otra diferencia es que puedes eliminar la llamada a->createView().

... lines 1 - 16
class RegistrationController extends AbstractController
{
... line 19
public function register(Request $request, UserPasswordHasherInterface $userPasswordHasher, VerifyEmailHelperInterface $verifyEmailHelper, EntityManagerInterface $entityManager): Response
{
... lines 22 - 53
return $this->renderForm('registration/register.html.twig', [
'registrationForm' => $form,
]);
}
... lines 58 - 88
}

Eso es todo! este método renderForm() es igual que render(). Sigue renderizando esta plantilla, y sigue pasando cualquiera de estas variables a la plantilla. Pero si alguna de las variables que pasamos es un objeto "formulario", llama al método createView() por nosotros... ¡lo cual está bien!

Esto también supone otro cambio, que no es muy perceptible. Si tienes un error de validación, tu controlador devolverá ahora una respuesta con el código de estado 422. Pero eso no se verá diferente en tu navegador. Si envío una contraseña demasiado corta, todo se ve igual... aunque el código de estado es ahora 422.

Symfony hizo este cambio por dos razones. Primero... es técnicamente más correcto tener un código de estado de error si hay un error de validación. Y segundo, si usas Turbo, esto es necesario para que Turbo sepa que la validación de tu formulario ha fallado. Lo consigues gratis simplemente usando el nuevo método abreviado.

A continuación, Symfony viene con una bonita y opcional integración con Docker para el desarrollo local. Algunas partes de esta integración han cambiado recientemente. Veamos cómo podemos utilizar Docker para añadir a nuestra aplicación un sistema de captura de correos electrónicos que nos ayudará a probarlos.

Leave a comment!

0
Login or Register to join the conversation
Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^8.0.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^3.6", // v3.6.1
        "composer/package-versions-deprecated": "^1.11", // 1.11.99.5
        "doctrine/annotations": "^1.13", // 1.13.2
        "doctrine/dbal": "^3.3", // 3.3.5
        "doctrine/doctrine-bundle": "^2.0", // 2.6.2
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.2
        "doctrine/orm": "^2.0", // 2.11.2
        "knplabs/knp-markdown-bundle": "^1.8", // 1.10.0
        "knplabs/knp-time-bundle": "^1.18", // v1.18.0
        "pagerfanta/doctrine-orm-adapter": "^3.6", // v3.6.1
        "pagerfanta/twig": "^3.6", // v3.6.1
        "sensio/framework-extra-bundle": "^6.0", // v6.2.6
        "sentry/sentry-symfony": "^4.0", // 4.2.8
        "stof/doctrine-extensions-bundle": "^1.5", // v1.7.0
        "symfony/asset": "6.0.*", // v6.0.7
        "symfony/console": "6.0.*", // v6.0.7
        "symfony/dotenv": "6.0.*", // v6.0.5
        "symfony/flex": "^2.1", // v2.1.7
        "symfony/form": "6.0.*", // v6.0.7
        "symfony/framework-bundle": "6.0.*", // v6.0.7
        "symfony/mailer": "6.0.*", // v6.0.5
        "symfony/monolog-bundle": "^3.0", // v3.7.1
        "symfony/property-access": "6.0.*", // v6.0.7
        "symfony/property-info": "6.0.*", // v6.0.7
        "symfony/proxy-manager-bridge": "6.0.*", // v6.0.6
        "symfony/routing": "6.0.*", // v6.0.5
        "symfony/runtime": "6.0.*", // v6.0.7
        "symfony/security-bundle": "6.0.*", // v6.0.5
        "symfony/serializer": "6.0.*", // v6.0.7
        "symfony/stopwatch": "6.0.*", // v6.0.5
        "symfony/twig-bundle": "6.0.*", // v6.0.3
        "symfony/ux-chartjs": "^2.0", // v2.1.0
        "symfony/validator": "6.0.*", // v6.0.7
        "symfony/webpack-encore-bundle": "^1.7", // v1.14.0
        "symfony/yaml": "6.0.*", // v6.0.3
        "symfonycasts/verify-email-bundle": "^1.7", // v1.10.0
        "twig/extra-bundle": "^2.12|^3.0", // v3.3.8
        "twig/string-extra": "^3.3", // v3.3.5
        "twig/twig": "^2.12|^3.0" // v3.3.10
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.1
        "phpunit/phpunit": "^9.5", // 9.5.20
        "rector/rector": "^0.12.17", // 0.12.20
        "symfony/debug-bundle": "6.0.*", // v6.0.3
        "symfony/maker-bundle": "^1.15", // v1.38.0
        "symfony/var-dumper": "6.0.*", // v6.0.6
        "symfony/web-profiler-bundle": "6.0.*", // v6.0.6
        "zenstruck/foundry": "^1.16" // v1.18.0
    }
}