CODEWITHSUNDEEP
symfonytwig
UXerUIer
UXerUIer

Reputation: 2338

Passing attr.class into the form theme in symfony 5

My form theme:

{% block form_row %}
<div class="form_row {% if errors|length > 0 %} is_error {% endif %} {{ attr.class }}" {% if attr|length > 0 %} {% for key, value in attr %} {{key}}="{{value}}" {% endfor %} {% endif %}>
    {% if block_prefixes.1 != "checkbox" %}
        {{ form_label(form)|raw }}
    {% endif %}
    {% if icon != null and block_prefixes.1 != "checkbox" %}
        <div class="input__icon-container {% if block_prefixes.2 == "password" %}input__password-container{% endif %}">
            <div class="icon">
                {{ source('@public_path' ~ asset('build/images/icons/' ~ icon|replace({"icon-":""}) ~ '.svg')) }}
            </div>
            {% if block_prefixes.2 == "password" %}
                <span class="password-reveal">Show</span>
            {% endif %}
            {{ form_widget(form, { 'attr': {'class': 'form-control'} }) }}
        </div>
        {{ form_errors(form) }}
    {% else %}
        {% if block_prefixes.2 == "password" %}
            <div class="input__password-container">
                <span class="password-reveal">Show</span>
        {% endif %}

        {{ form_widget(form, { 'attr': {'class': 'form-control'} }) }}

        {% if block_prefixes.2 == "password" %}
            </div>
        {% endif %}
        {{ form_errors(form) }}
    {% endif %}
</div>
{% endblock %}

{% block radio_widget %}
    <div class="label">{{ label|raw }} {% if help != null %} <span class="help">{{help}}</span> {% endif %}</div>
    {% for choice in choices %}
        <div class='input__choice-container'>
            <label class="is_regular"> <input type="radio" name="{{ full_name}}" {% if required == "true" %} required="required" {% endif %} value="{{ choice.value }}"><span class="radio"></span> <span>{{ choice.label }}</span> </label>
        </div>
    {% endfor %}
{% endblock %}

{% block checkbox_widget %}
    <div class="custom-checkbox custom-control">
        <input type="checkbox" class="custom-control-input" id="{{id}}" name="{{ full_name}}">
        <label class="custom-control-label" for="{{id}}">{{label|raw}}</label>
    </div>
{% endblock %}

The error I got: Key "class" does not exist as the array is empty.

But that's not accurate because this is my form output for this form row:

{{ form_row(registrationForm.displayname, {
    attr : { "class" : "mb-1", "data-test" : "tests"}
})}}

So the question is here, how do I output the class content in the appropriate manner? Clearly I'm doing it wrong.

Upvotes: 0

Views: 359

Answers (1)

Maulik Parmar
Maulik Parmar

Reputation: 645

It is because your template doesnt print class literally

Understand the structure of forms here Form Customization

You will need to inject attribute print logic just like one of the built-in templates found( bootstrap 4 example) in Form Themes 

{% block form_row -%}
    {%- set widget_attr = {} -%}
    {%- if help is not empty -%}
        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
    {%- endif -%}
    <div{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' form-group' ~ ((not compound or force_error|default(false)) and not valid ? ' has-error'))|trim})} %}
         {{ block('attributes') }}
    {% endwith %}>
        {{- form_label(form) }} {# -#}
        {{ form_widget(form, widget_attr) }} {# -#}
        {{- form_help(form) -}}
        {{ form_errors(form) }} {# -#}
    </div> {# -#}
{%- endblock form_row %}

If you don't want to do it over, extend built in form widgets which has the printing logic. Or simply work out on your block to print these passed attributes.

Upvotes: 1

Related Questions