Nuevo en Symfony 4.3: Temas de formulario más sencillos

Imagina una aplicación Symfony que contiene un campo de formulario especial con un selector de color que requiere de JavaScript para funcionar. Aunque Symfony dispone de muchas formas de personalizar el diseño de los formularios, la mejor solución para este caso no es lo bastante sencilla.

El motivo es que para hacer este campo de formulario realmente reusable, el nombre del bloque de Twig asociado a él debe ser inmutable. Sin embargo, Symfony prefija por defecto los nombres de los bloques de los campos con el nombre del bloque del element padre (ejemplos: _product_color_widget, _user_color_widget, etc. en vez de un nombre fijo como color_widget).

La solución a este problema es sencilla, pero requiere varios pasos:

Paso 1. Crea un nuevo campo de formulario para el selector de color (como no hace falta definir ninguna opción ni lógica de negocio para el campo, su clase está casi vacía):

class ColorPickerType extends AbstractType
{
    public function getParent(): string
    {
        return TextType::class;
    }
}

Paso 2. Actualiza tus formularios para usar el nuevo campo:

// ...
$builder->add('color', ColorPickerType::class);

El valor asignado por Symfony para la opción block_prefixes será un array con los siguientes valores: form, text, color_picker y _<parent_form_name>_color. Gracias al valor color_picker, que es fijo, ya puedes definir una única plantilla Twig usando ese nombre de bloque y funcionará con cualquier formulario de la aplicación.

Paso 3. Crea la plantilla Twig que redefine el diseño del widget asociado a ese campo de formulario:

{# templates/form/fields.html.twig #}
{% block color_picker_widget %}
    {{ form_widget(form, {'attr': {'v-model': 'color', '@focus': 'open'}}) }}
    {# ... más código aquí; si hace falta ... #}
{% endblock %}

En Symfony 4.3 todo lo anterior seguirá funcionando, pero lo hemos simplificado al máximo. Gracias a la nueva opción block_prefix, puedes definir un nombre de bloque arbitrario que se añadirá a los nombres generados por Symfony.

Siguiendo el mismo ejemplo que antes, ya no hace falta que crees la clase ColorPickerType. Solo tienes que seguir dos pasos:

Paso 1. Define un nombre de bloque especial para el campo de formulario:

// ...
$builder->add('color', null, ['block_prefix' => 'color_picker']);

Paso 2. Usa ese nombre de bloque en la plantilla Twig que redefine el diseño del campo de formulario:

{# templates/form/fields.html.twig #}
{% block color_picker_widget %}
    {# ... #}
{% endblock %}

Esta funcionalidad fue contribuida por Yonel Ceruto en el pull request #29680.

Fuente: New in Symfony 4.3: Simpler Form Theming

• © 2024 - symfony.es
• Contacto
• Privacidad
• Condiciones
• v7