Saltar al contenido

¿Puedo poner html dentro de un botón de formulario de Symfony con Twig?

Luego de de nuestra extensa recopilación de datos pudimos solucionar este conflicto que tienen algunos los usuarios. Te regalamos la solución y nuestro objetivo es servirte de gran ayuda.

Solución:

Sí, pero tendrás que personalizar el tema de tu formulario.

Nota: Esta respuesta ha sido editada para que sea compatible con Symfony 2.8 3.xy 4.x. Para versiones anteriores, consulte el historial de edición.

Una buena forma de admitir iconos en botones es usar extensiones de formulario. Primero cree una clase de extensión de formulario que defina una nueva propiedad icono que puedes usar en tus formularios:

setAttribute('icon', $options['icon']);
    

    /**
     * @param FormView      $view
     * @param FormInterface $form
     * @param array         $options
     */
    public function buildView(FormView $view, FormInterface $form, array $options)
    
        $view->vars['icon'] = $options['icon'];
    

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    
        $resolver->setDefaults(['icon' => null]);
        $resolver->setDefined(['icon']);
    

    /**
     * Returns the name of the type being extended.
     *
     * @return string The name of the type being extended
     */
    public function getExtendedType()
    
        return ButtonType::class; // Extend the button field type
    

Registre esta extensión en su services.yml (o archivo xml). El alias debe corresponder con el string devuelto por lo anterior getExtendedType() método.

# Form extension for adding icons
foobar.form_extension.icon:
    class: FooBarBundleFormExtensionButtonTypeIconExtension
    tags:
        -  name: form.type_extension, extended_type: SymfonyComponentFormExtensionCoreTypeButtonType 

A continuación, anule su form_div_layout.html.twig. (Ver enlace arriba) Ahora puede usar icon como variable en estos temas. Para los botones anulamos el button_widget cuadra:

% block button_widget -%
    % set attr = attr
    % if label is empty -%
        %- if label_format is not empty -%
            % set label = label_format
        %- else -%
            humanize %
        %- endif -%
    %- endif -%
    default %
        % set iconHtml = ' ' %
    % else %
        % set iconHtml = '' %
    % endif %
    
%- endblock button_widget %

Finalmente, puede usar la opción de icono en su plantilla:

 form_widget(form.jiraStatus, 
    'icon': 'fa-bug',
    'label': 'Bug',
    'attr':'class': 'btn btn-large btn-default btn-block' 
) 

O en tus clases de formulario:

    $builder
        ->add('jiraStatus', SubmitType::class, [
                'label' => 'Bug',
                'icon' => 'fa-bug',
                'attr' => [
                    'class' => 'btn btn-large btn-default btn-block',
                ],
            ]
        );

Nota: Por lo general, es mejor agregar el ícono en la plantilla, ya que los íconos son una cuestión de presentación, y sus clases de formulario realmente deberían tener que ver con la lógica de negocios.

Hágalo aún más genérico:

Al devolver el FQCN de ButtonType en getExtendedType (), le decimos a Symfony que estamos ampliando todos los elementos de formulario posibles que heredan de ButtonType tal como SubmitType. Desafortunadamente, no hay un tipo que podamos usar para apuntar a todos los elementos de formulario posibles, pero podemos agregar una extensión adicional que apunte a FormType. Todos los campos de formulario, como los cuadros de entrada y los elementos seleccionados, heredan de este tipo. Entonces, si desea que funcione con ambos campos de formulario y botones, sugiero lo siguiente:

Crea una clase abstracta abstract class AbstractIconExtension extends AbstractTypeExtension con exactamente el mismo contenido que el anterior, pero omita el getExtendedType método. Luego, cree dos clases que se extiendan desde esta clase (p. Ej. FieldTypeIconExtension y ButtonTypeIconExtension) que solo contienen el getExtendedType método. Uno que devuelve el FQCN de FormType y el otro devolviendo el FQCN de ButtonType:

Foo / BarBundle / Form / Extension / ButtonTypeIconExtension.php:

Foo / BarBundle / Form / Extension / FieldTypeIconExtension.php:

Registre estas dos clases en sus servicios utilizando el alias correspondiente:

# Form extensions for adding icons to form elements
foobar.form_extension.button_icon:
    class: FooBarBundleFormExtensionButtonTypeIconExtension
    tags:
        -  name: form.type_extension, extended_type: SymfonyComponentFormExtensionCoreTypeButtonType 
foobar.form_extension.form_icon:
    class: FooBarBundleFormExtensionFieldTypeIconExtension
    tags:
        -  name: form.type_extension, extended_type: SymfonyComponentFormExtensionCoreTypeFormType 

Ahora puedes usar el icon variable en otros lugares en los temas de su formulario también. Por ejemplo, para agregar iconos a las etiquetas, puede anular la form_label cuadra:

% block form_label -%
    % if label is not sameas(false) -%
        % if not compound -%
            % set label_attr = label_attr
        %- endif %
        % if required -%
            merge('class': (label_attr.class) %
        %- endif %
        % if label is empty -%
            %- if label_format is not empty -%
                replace(
                    '%name%': name,
                    '%id%': id,
                ) %
            %- else -%
                humanize %
            %- endif -%
        %- endif -%
        default %
            % set iconHtml = ' ' %
        % else %
            % set iconHtml = '' %
        % endif %
        raw trans(, translation_domain) 
    %- endif %
%- endblock form_label % 

Y luego agregue un ícono a la etiqueta de ese campo en su clase de formulario:

$builder
    ->add('mytextfield', TextType::class, [
            'label' => 'My fancy text field',
            'icon' => 'fa-thumbs-o-up'
        ]
    );

Si está buscando una solución más simple, simplemente inserte esto en el tema de su formulario:

%- block button_widget -%
    merge(default('btn-default') ~ ' btn')) %
    %- if label is empty -%
        %- if label_format is not empty -%
            % set label = label_format
        %- else -%
            % set label = name
        %- endif -%
    %- endif -%
    
%- endblock button_widget -%

Luego puede continuar e insertar HTML en la etiqueta de su botón:

 form_widget(searchForm.search, 'label': '') 

así es como resolví y probé con Symfony 4. En la plantilla twig:

form_start(form)
form_widget(form)
form_end(form)

En mi formulario de controlador PHP no agregué ningún botón sino solo campos de entrada.

   $form = $this->createFormBuilder($article)
        ->add('title',TextType::class, array(
            'data' => $article->getTitle(),
            'attr' => array('class' => 'form-control')))
        ->add('body', TextareaType::class, array(
            'data' => $article->getBody(),
            'required' => false,
            'attr' => array('class' => 'form-control')))
        ->getForm();

Lo que hice para verificar el envío del formulario es:

if($form->isSubmitted() )
    if($request->request->get('create') && $form->isValid())
        $article = $form->getData();
        $entityManager = $this->getDoctrine()->getManager();
        $entityManager->persist($article);
        $entityManager->flush();
     //l'alternativa può solo essere il cancel
    return $this->redirectToRoute('article_list');    

Espero que esto pueda ayudar. Es bueno decir que incluso el problema de la alineación de los botones se resuelve porque div no se agrega para cada botón como formulario add el método lo hace.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Respuestas a preguntas comunes sobre programacion y tecnología