Twig 中的 Symfony form_widget() 给出 <input> 包装在 <div> 中（使用 jQuery 和 jQuery-mobile）

Question

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

在 "Rendering each Field by Hand" 标题处，我想在 twig 文件中添加一些属性，以便我的所有字段都均匀地排成一行，使用 "col-* css" 方式占据 space一行。

{{ 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" class 属性在 input 标签中，但由于此标签被 包围a div 显示不符合预期 "col-4" 确实应该在 div 标签中，即 parent input 标签 以便在屏幕上应用 "col-4" 规则。

所以我想知道是否有一种方法可以使用 symfony 形式将使用 Twig 函数 form_widget() 设置的 input 的 class 属性转移到它的 parent div 而不是使用 jQuery javascript 函数来修复 DOM 显示？

Answer 1

我通过创建一个重新定义表单 input_inline_template.twig.html.

的模板文件来解决这个问题

如您所见，它编辑了 form_div_layout.html.twig，可以在 main form themes file.

中找到

块 {% block form-widget %} 可以根据想要的小部件用各种情况替换。

然后您可以通过输入以下内容来使用此文件：{% 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 %}

Twig 中的 Symfony form_widget() 给出 <input> 包装在 <div> 中（使用 jQuery 和 jQuery-mobile）

Symfony form_widget() in Twig gives <input> wrapped in a <div> (with jQuery and jQuery-mobile)

jquery

symfony-forms

symfony

jquery-mobile