Twig 中的 Symfony form_widget() 给出了<input>包装在一个(带有 jQuery <div> 和 jQuery-mobile)

Question

在这种情况下，让我们假设我用官方示例实现了一个表单：http://symfony.com/doc/current/book/forms.html

在"手工渲染每个字段"的标题中，我想在trick文件中添加一些属性，以便通过使用"col-*css"方式在一行上占据空间，将我的所有字段均匀地放置在一行中。

{{ form_start(form) }}
<div class="col-12">
    {{ form_label(form.task,null,{'label_attr': {'class':'col-3'}}) }}
    {{ form_widget(form.task, {'attr': {'class': 'col-4' }}) }}
    {{ form_errors(form.task, {'attr': {'class': 'col-5'}}) }}
</div>
{{ form_end(form) }}

对于该示例，form_widget的呈现将是：

<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
    <input type="text" id="task_task" name="task[task]" required="required" class="col-4">
</div>

注意到"col-4"类属性在input标记中，但由于该标记被一个div包围，因此显示结果与预期不同，并且"col-4"确实应该在div标记中，该标记是input标记的父标记，以便在屏幕上应用"col-4"规则。

因此，我想知道是否有一种方法可以使用symfony表单将使用Twig函数form_widget（）设置的input的class属性转移到其父div，而不是使用jQuery javascript函数来修复DOM显示？

Answer 1

我做了一个变通方法，创建了一个模板文件，重新定义表单input_inline_template.titch.html.

可以看到，它编辑form_div_layout.html.twit，该文件可以在主表单主题文件中找到。

块CCD_ 7可以根据需要的小部件用各种情况来代替。

然后，您可以通过输入：{% form_theme form 'YourBundle:[folder to file]:input_inline_template.html.twig' %}来使用此文件。

{% extends 'form_div_layout.html.twig' %} 
{% block form_row  %}
    <div class='col-12' id={{ id ~ '_div_row_id'}}>
    {% block form_label   %}
        <div class='col-3' id={{ id ~ '_div_label_id' }}>
            {{ parent() }}
        </div>
    {% endblock %}
        {% block form-widget %}
            <div class='col-4'>
                {{ parent() }}  
            </div>
        {% endblock %}
    {% block form_errors %}
        <div class='col-5'>
            {%- if errors|length > 0 -%} 
                {%- for error in errors -%}
                    <div id={{ id ~ "_error_msg_id" }}>{{ error.message }}</div>
                {%- endfor -%}
            {%- endif -%} 
        </div>
    {% endblock %}
    </div>
{% endblock %}