Symfony 2 中的自定义表单主题中断 From::model 数据属性

Question

OP 注意：只是li 元素没有以我忘记的形式传递。

有关上下文，请参阅我的Previous Question，了解我如何需要能够将select 和option 标签更改为ul 和li 标签，因为它们看起来和运行良好时使用Symfony 2 表单呈现下拉列表使用我选择的 CSS 框架。

由于更改了我的表单元素的呈现方式，提交后数据似乎不再通过。

我将覆盖choice 字段的{% choice_widget_* %} 部分，以便将它们更改为ul 和lis。这是我的更改：

{%- block choice_widget_collapsed -%}
    {%- if required and empty_value is none and not empty_value_in_choices and not multiple -%}
        {% set required = false %}
    {%- endif -%}
    <ul {{ block('widget_attributes') }}>
        {%- if preferred_choices|length > 0 -%}
            {% set options = preferred_choices %}
            {{- block('choice_widget_options') -}}
            {%- if choices|length > 0 and separator is not none -%}
                <li disabled="disabled">{{ separator }}</li>
            {%- endif -%}
        {%- endif -%}
        {%- set options = choices -%}
        {{- block('choice_widget_options') -}}
    </ul>
{%- endblock choice_widget_collapsed -%}

{%- block choice_widget_options -%}
    {% for group_label, choice in options %}
        {%- if choice is iterable -%}
            <optgroup label="{{ group_label|trans({}, translation_domain) }}">
                {% set options = choice %}
                {{- block('choice_widget_options') -}}
            </optgroup>
        {%- else -%}
            <li value="{{ choice.value }}"{% if choice is selectedchoice(value) %} selected="selected"{% endif %}><a href="#">{{ choice.label|trans({}, translation_domain) }}</a></li>
        {%- endif -%}
    {% endfor %}
{%- endblock choice_widget_options -%}

我从Symfony 2 github source 找到并修改了这段代码，它允许我这样呈现我的表单：

问题：提交此表单时，“目标”字段正常，但我的覆盖似乎破坏了从下拉列表中检索数据的方式，并且我的调试显示空数据字段。

这是我的类型中setDefaultOptions() 中的换行符：

这是表单数据。请注意“目标”的模型数据确实存在，这是一个标准输入字段，以及定位器下拉列表的模型数据如何不存在（突出显示）：

因此，由于我更改了表单的呈现方式，因此数据显示为 null，但是 对此我能做些什么？

我可以放置某种适配器或数据转换器来处理这种变化吗？需要做什么？我可以想象任何想要为自己的表单设置主题并删除一些在渲染过程中由 symfony 注入的烦人 div 的人都会发生这种情况。我能做什么？

Answer 1

<li></li> 元素不是表单元素（因此不会随表单一起提交）。

您需要添加一个表单提交处理程序（使用 javascript），将 li 元素转换回某种表单元素。

理想情况下，您可以将它们转换回 <option></option> 元素，这样您就不需要服务器上的数据转换器。

jQuery 样板代码：

$(document).ready(function() {
    $("#myForm1").submit(function() {
        //Gets fired when the form is about to be submitted, but before the actual request
        $("#myForm1").append("<optgroup name=.......");          
        $("ul[name=\"somebundle_formname_fieldname\"]").children("li").each(function () {
            $("#myForm1").find("<optgroup name=.......").append("<option value=" + $(this).attr("value") +">bla</option>");
        });
    });
});

Vanilla JS（IE9+、Chrome、Firefox）样板代码：

document.addEventListener("DOMContentLoaded", function() {
    var myForm1 = document.getElementById("myForm1");
    myForm1.addEventListener('submit', function(e) {
        //Gets fired when the form is about to be submitted, but before the actual request
        var tmpOptGroup = document.createElement("optgroup");
        tmpOptGroup.name = "somebundle_formname_fieldname";
        myForm1.appendChild(tmpOptGroup);

        var liElements = document.querySelectorAll("ul[name=\"somebundle_formname_fieldname\"] li");
        for(var i=0;i<liElements.length;i++) {
            var currentLiElement = liElements[i];
            //add option, see jquery above
        }
    });
});