array - ¿Puedo poner html dentro de un botón de formulario de Symfony con Twig?
twig strict mode (4)
Estoy tratando de poner html dentro de un botón de formulario con una ramita como:
{{ form_widget(form.jiraStatus, {
''label'': ''<i class="fa fa-bug"></i>Bug'',
''attr'':{''class'': ''btn btn-large btn-default btn-block'' }
}) }}
Pero al hacer esto, el botón inclinado se muestra así:
<button type="submit" name="SolveTask[taskTypesFormObj][bugStatus]"
class="btn btn-large btn-default btn-block">
<i class="fa fa-bug"></i>Bug
</button>
Como puede ver, el html dentro del botón está codificado. Intenté usar el filtro en bruto, pero el efecto es el mismo. ¿Hay una forma de hacer esto?
¡Gracias!
Así es como lo resolví y probé con Symfony 4. En la plantilla de twig:
{{form_start(form)}}
{{form_widget(form)}}
<div class="class row">
<div class="class col-sm-offset col-sm-10">
<button name=''create'' type=''submit'' value=''create'' class=''btn btn-primary''>Save</button>
<button name=''cancel'' type=''submit'' value=''cancel'' class=''btn btn-cancel'' formnovalidate=''formnovalidate''>Cancel</button>
</div>
</div>
{{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 no se agrega div para cada botón como lo hace el método de add formularios.
Sí, pero tendrás que personalizar el tema de tu formulario .
Nota: esta respuesta se ha editado 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 mediante extensiones de formulario. Primero cree una clase de extensión de formulario que defina un nuevo icono de propiedad que pueda usar en sus formularios:
<?php
namespace Foo/BarBundle/Form/Extension;
use Symfony/Component/Form/AbstractTypeExtension;
use Symfony/Component/Form/FormBuilderInterface;
use Symfony/Component/Form/FormInterface;
use Symfony/Component/Form/FormView;
use Symfony/Component/Form/Extension/Core/Type/ButtonType;
use Symfony/Component/OptionsResolver/OptionsResolver;
class ButtonTypeIconExtension extends AbstractTypeExtension
{
/**
* @param FormBuilderInterface $builder
* @param array $options
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->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 la cadena devuelta por el método getExtendedType() .
# Form extension for adding icons
foobar.form_extension.icon:
class: Foo/BarBundle/Form/Extension/ButtonTypeIconExtension
tags:
- { name: form.type_extension, extended_type: Symfony/Component/Form/Extension/Core/Type/ButtonType }
A continuación, anule su form_div_layout.html.twig . (Vea el enlace arriba) Ahora puede usar el icon como variable en estos temas. Para los botones, anulamos el bloque button_widget :
{% block button_widget -%}
{% set attr = attr|merge({class: (attr.class|default('''') ~ '' btn'')|trim}) %}
{% if label is empty -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
''%name%'': name,
''%id%'': id,
}) %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
{% if icon|default %}
{% set iconHtml = ''<i class="fa '' ~ icon ~ ''"></i> '' %}
{% else %}
{% set iconHtml = '''' %}
{% endif %}
<button type="{{ type|default(''button'') }}" {{ block(''button_attributes'') }}>{{ iconHtml|raw }}{{ label|trans({}, translation_domain) }}</button>
{%- endblock button_widget %}
Finalmente, puedes usar la opción de icono en tu plantilla:
{{ form_widget(form.jiraStatus, {
''icon'': ''fa-bug'',
''label'': ''Bug'',
''attr'':{''class'': ''btn btn-large btn-default btn-block'' }
}) }}
O en tus clases de forma:
$builder
->add(''jiraStatus'', SubmitType::class, [
''label'' => ''Bug'',
''icon'' => ''fa-bug'',
''attr'' => [
''class'' => ''btn btn-large btn-default btn-block'',
],
]
);
Nota: En general, es mejor agregar el ícono en la plantilla, ya que los íconos son una cuestión de presentación, y sus clases de formularios deberían ser sobre lógica de negocios.
Que sea aún más genérico:
Al devolver el FQCN de ButtonType en getExtendedType (), le decimos a Symfony que estamos extendiendo todos los elementos de formulario posibles que heredan de ButtonType , 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 se dirija a FormType . Todos los campos de formulario como cuadros de entrada y elementos seleccionados heredan de este tipo. Entonces, si desea que funcione con ambos campos de formulario y botones, sugiero lo siguiente:
Crear una clase abstracta La clase abstract class AbstractIconExtension extends AbstractTypeExtension con exactamente el mismo contenido que el anterior pero deja de lado el método getExtendedType . Luego cree dos clases que se extiendan desde esta clase (por ejemplo, FieldTypeIconExtension y ButtonTypeIconExtension ) que solo contienen el método getExtendedType . Uno devolviendo el FQCN de FormType y el otro devolviendo el FQCN de ButtonType :
Foo / BarBundle / Form / Extension / ButtonTypeIconExtension.php:
<?php
namespace Foo/BarBundle/Form/Extension;
use Symfony/Component/Form/Extension/Core/Type/ButtonType;
class ButtonTypeIconExtension extends AbstractIconExtension
{
/**
* Returns the name of the type being extended.
*
* @return string The name of the type being extended
*/
public function getExtendedType()
{
return ButtonType::class; // extend all buttons
}
}
Foo / BarBundle / Form / Extension / FieldTypeIconExtension.php:
<?php
namespace Foo/BarBundle/Form/Extension;
use Symfony/Component/Form/Extension/Core/Type/FormType;
class FieldTypeIconExtension extends AbstractIconExtension
{
/**
* Returns the name of the type being extended.
*
* @return string The name of the type being extended
*/
public function getExtendedType()
{
return FormType::class; // extend all field types
}
}
Registre estas dos clases en sus servicios usando el alias correspondiente:
# Form extensions for adding icons to form elements
foobar.form_extension.button_icon:
class: Foo/BarBundle/Form/Extension/ButtonTypeIconExtension
tags:
- { name: form.type_extension, extended_type: Symfony/Component/Form/Extension/Core/Type/ButtonType }
foobar.form_extension.form_icon:
class: Foo/BarBundle/Form/Extension/FieldTypeIconExtension
tags:
- { name: form.type_extension, extended_type: Symfony/Component/Form/Extension/Core/Type/FormType }
Ahora también puede utilizar la variable de icon en otros lugares en sus temas de formulario. Por ejemplo, para agregar íconos a las etiquetas, puede anular el bloque form_label :
{% block form_label -%}
{% if label is not sameas(false) -%}
{% if not compound -%}
{% set label_attr = label_attr|merge({''for'': id}) %}
{%- endif %}
{% if required -%}
{% set label_attr = label_attr|merge({''class'': (label_attr.class|default('''') ~ '' required'')|trim}) %}
{%- endif %}
{% if label is empty -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
''%name%'': name,
''%id%'': id,
}) %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
{% if icon|default %}
{% set iconHtml = ''<i class="fa '' ~ icon ~ ''"></i> '' %}
{% else %}
{% set iconHtml = '''' %}
{% endif %}
<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ iconHtml|raw }}{{ label|trans({}, translation_domain) }}</label>
{%- endif %}
{%- endblock form_label %}
Y luego agregue un icono 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 su tema de formulario :
{%- block button_widget -%}
{% set attr = attr|merge({class: (attr.class|default(''btn-default'') ~ '' btn'')|trim}) %}
{%- if label is empty -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
''%name%'': name,
''%id%'': id,
}) %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
<button type="{{ type|default(''button'') }}" {{ block(''button_attributes'') }}>{{ label|trans({}, translation_domain)|raw }}</button>
{%- endblock button_widget -%}
Luego puede seguir adelante e insertar HTML en la etiqueta de su botón:
{{ form_widget(searchForm.search, {''label'': ''<span class="glyphicon glyphicon-search" aria-hidden="true"></span>''}) }}
Una solución aún más simple podría ser dejar los botones fuera del tipo de formulario y establecer los atributos de name y value . Luego, recupérelos como lo haría normalmente con los parámetros del controlador.
En su plantilla:
{{ form_start(form) }}
<button name="clicked" value="saveDraft" class="btn btn-warning">
<i class="fa fa-square-o"></i> Save as Draft
</button>
<button name="clicked" value="saveComplete" class="btn btn-warning">
<i class="fa fa-check-square-o"></i> Save as Complete
</button>
Luego en tu control
if ($form->isSubmitted() && $form->isValid()) {
$clicked = $request->request->get(''clicked'');
}