Créer un block de thème de formulaire perso avec Twig

Share Button

Read the English version

Hier, je me demandais comment créer un block de thème de formulaire personnalisé avec Twig. Mon problème était d’afficher deux boutons radio avec un rendu particulier.

Je n’ai pas trouvé la solution dans la documentation Symfony2 mais la méthode est très simple. Laissez-moi vous l’expliquer :

Le block de thème personnalisé

Je voulais utiliser le block suivant. Comme vous le voyez, en plus des éléments p, div et de leurs classes spécifiques, la grosse différence avec la méthode native form_row de Twig est que les labels des radios ne sont pas dans une balise label (mais il y a une balise label pour le champ de formulaire parent).

{# Obtao/AcmeBundle/Resources/Form/obtao_form_layout.html.twig #}
{# étendez le layout de base Twig comme d'habituuuuuuuude (Claude si tu nous lis) #}
{% extends "form_div_layout.html.twig" %} 

{% block form_radio %}
{% spaceless %}
    <p class="checkbox-field">
        {{ form_label(form) }}
        {% for child in form %}
            <div class="radio-item">
                {{ form_widget(child) }}
                {{ child.vars.label|trans }}
            </div>
        {% endfor %}
    </p>
{% endspaceless %}
{% endblock form_radio %}

Mais si je l’utilise dans un template comme ceci :

{# somewhere in Obtao/AcmeBundle/Resources/views/Acme/template.html.twig #}
{{ form_radio(form.myRadioField) }}

j’ai l’erreur suivante :
The function “form_radio” does not exist in /my/path/src/Obtao/AcmeBundle/Resources/views/Acme/template.html.twig at line XX

La solution est de dire à Twig que vous voulez utiliser ce nouveau block.

Créez l’extension Twig

Créez simplement une nouvelle classe qui listera tous vos nouveaux blocks :

<?php

namespace Obtao\AcmeBundle\Twig\Extension;

class FormExtension extends \Twig_Extension
{

    public function getFunctions()
    {
        return array(
            'form_radio'   => new \Twig_Function_Node('Symfony\Bridge\Twig\Node\SearchAndRenderBlockNode', array('is_safe' => array('html'))),
        );
    }

    public function getName()
    {
        return 'obtao_form_extension';
    }
}

Et n’oubliez pas d’enregistrer votre nouvelle extension en la taguant avec twig.extension :

<!-- Obtao\AcmeBundle\Resources\config\services.xml -->
<?xml version="1.0" ?>

<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
    <services>
        <service id="obtao.form.extension" class="Obtao\AcmeBundle\Twig\Extension\FormExtension">
            <tag name="twig.extension" />
        </service>
    </services>
</container>

Maintenant, vous pouvez utiliser votre nouveau block pour afficher une partie d’un champ de formulaire.
N’oubliez pas d’utiliser votre thème de formulaire grâce à l’une des méthodes suivantes :

1) Définir votre thème pour tous les templates dans config.yml :

twig:
    # ...
    form:
        resources:
            - "ObtaoAcmeBundle:Form:obtao_form_layout.html.twig"

2) Définir votre thème pour le template actuel seulement :
{# dans votre template, au dessus du formulaire #}
{% form_theme form 'ObtaoAcmeBundle:Form:obtao_form_layout.html.twig' %}

Share Button

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Protected by WP Anti Spam