hideFormLabels.html.twig

{% extends 'FuzAppBundle::layout.html.twig' %}

{% block extra_js %}
    <script src="{{ asset('bundles/fuzapp/js/collection/jquery.collection.js') }}"></script>
{% endblock %}

{% block title %}Hide form labels{% endblock %}

{% block body %}

    <h2>{{ block('title') }}</h2>

    {% verbatim %}
        <p>
            By default, <code>{{ form() }}</code> and <code>{{ form_row() }}</code> are kind of aliases for <code>{{ form_label() }}</code>,
            <code>{{ form_widget() }}</code> and <code>{{ form_errors() }}</code>. If you want to avoid displaying useless labels for your
            collection elements, you should not use <code>{{ form_row() }}</code>, but manually render <code>{{ form_widget() }}</code> and
            <code>{{ form_errors() }}</code> instead.
        </p>
    {% endverbatim %}

    {{
        github([
            'Controller/TroubleshootController.php',
            'Entity/Task.php',
            'Form/TaskType.php',
            'Entity/Tasks.php',
            'Form/TasksType.php',
            'Resources/views/Troubleshoot/hideFormLabels.html.twig',
        ])
    }}

    {# Demo A : default behavior #}

    {% form_theme formA 'FuzAppBundle::jquery.collection.html.twig' %}

    <h3>By default, {% verbatim %}{{ form_row() }}{% endverbatim %}</h3>

    {{ form_start(formA) }}
    {{ form_row(formA.tasks, {'attr': {'class': 'collectionA'} }) }}
    {{ form_end(formA) }}

    {% for task in dataA.tasks %}
        <p>Should <strong>{{ task.task }}</strong> before <strong>{{ task.dueDate|date }}</strong></p>
    {% endfor %}

    <hr/>

    {# Demo B : hiding labels without using form theme #}

    <h3>By using {% verbatim %}{{ form_widget() }} {% endverbatim %} without form theme</h3>

    {{ form_start(formB) }}

    <div
        id="formB-demo"
        class="collectionB"
        {% if formB.tasks.vars.prototype is defined %}
            data-prototype="{{ form_widget(formB.tasks.vars.prototype)|e('html_attr') }}"
            data-prototype-name="{{ formB.tasks.vars.prototype.vars.name|e('html_attr') }}"
        {% endif %}
        data-allow-add="{{ formB.tasks.vars.allow_add }}"
        data-allow-remove="{{ formB.tasks.vars.allow_delete }}"
        data-name-prefix="{{ formB.tasks.vars.full_name }}"
     >
        {% for task in formB.tasks %}
            {{ form_widget(task) }}
            {{ form_errors(task) }}
        {% endfor %}
    </div>

    {{ form_end(formB) }}

    {% for task in dataB.tasks %}
        <p>Should <strong>{{ task.task }}</strong> before <strong>{{ task.dueDate|date }}</strong></p>
    {% endfor %}

    <hr/>

    {# Demo C : using a form theme #}

    <h3>By using a form theme [Recommanded]</h3>

    {# "task" is your field type name (look at the comments in TaskType) #}
    {% block task_label %}{% endblock %}

    {# "_self" will use the block declared above to overwrite the default theme #}
    {% form_theme formC _self 'FuzAppBundle::jquery.collection.html.twig' %}

    {{ form_start(formC) }}
    {{ form_row(formC.tasks, {'attr': {'class': 'collectionA'} }) }}
    {{ form_end(formC) }}

    {% for task in dataC.tasks %}
        <p>Should <strong>{{ task.task }}</strong> before <strong>{{ task.dueDate|date }}</strong></p>
    {% endfor %}

{% endblock %}

{% block script %}

    <script type="text/javascript">
        $('.collectionA').collection();
        $('.collectionB').collection();
        $('.collectionC').collection();
    </script>

{% endblock %}