Symfony 2 中的自定义表单主题中断 Form::modelData 属性

Question

OP note: it was simply that li elements aren't passed through in forms which I forgot about.

For context please see my on how I required the ability to change select and option tags to ul an li tags when rendering a dropdown with Symfony 2 forms as they look and work well with my CSS framework of choice.

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

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

{%- 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() 中的换行符：

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

由于我更改了表单的呈现方式，所以数据以空值形式通过，但是我能做些什么？

我可以放置某种适配器或数据转换器来处理这种变化吗？需要做什么？我可以想象任何想要为自己的表单设置主题并删除一些在渲染过程中由 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
        }
    });
});