Jquery 自定义表单字段类型嵌入表单Symfony2

我有三个实体：

• 饮食、菜单和膳食
• 《饮食》有一套菜单
• 菜单上有一组饭菜

因此，我必须创建一个嵌入式的饮食形式

我遵循Symfony2的嵌入式形式的文档，但这并不是那么简单

嗯。我首先需要的是：

• 每种形式的饮食都需要两份菜单
• 每种形式的菜单都需要三餐。（我不知道这是否可能）

我可以在控制器中执行此操作并发送到twig。但问题是当我“允许添加”时， 要动态添加表单

这就是问题所在：

守则：

class DietType extends AbstractType
{
    public function buildForm(FormBuilder $builder, array $options)
    {
        $builder
            ->add('calories')
            ->add('menus', 'collection', array('type' => new MenuType(),
            'allow_add' => true, 'by_reference' => false, 'prototype' => true   
        ));
    }

    public function getDefaultOptions(array $options)
    {
        return array(
            'data_class' => 'Project\FoodBundle\Entity\Diet',
            );
    }

    public function getName()
    {
        return 'diet';
    }
}

class MenuType extends AbstractType
{

    public function buildForm(FormBuilder $builder, array $options)
    {
        $builder
            ->add('description')
            ->add('meals', 'collection', array('type' => new MealType(),
                           'allow_add' => true, 'by_reference' => false,
                           'prototype' => true
                 ));
    }

    public function getDefaultOptions(array $options)
    {
        return array(
            'data_class' => 'Project\FoodBundle\Entity\Menu',
        );
    }

    public function getName()
    {
        return 'menu';
    }
}

class MealType extends AbstractType
{
    public function buildForm(FormBuilder $builder, array $options)
    {
        $builder
            ->add('name');
    }

    public function getDefaultOptions(array $options)
    {
        return array(
            'data_class' => 'Project\FoodBundle\Entity\Meal',
        );
    }

    public function getName()
    {
        return 'meal';
    }
}

和细枝模板：

{% extends '::base.html.twig' %}

{% block body %}

<h1>Diet creation</h1>

<form action="{{ path('diet_create') }}" method="post" {{ form_enctype(form) }}>

    {{ form_row(form.calories) }}

        <div id = "menus" data-prototype="{{ form_widget(form.menus.vars.prototype)|e }}">

        <h3>Menus</h3>
        {% for menu in form.menus %}
        <ul class="menu">
               {{ _self.prototype(menu)  }}
        </ul>
        {% endfor %}

        {% macro prototype(menu) %}
        {{ form_row(menu.description) }}
        <li class="meal">
            {% for meal in menu.meals %}
                {{ form_row(meal.name) }}
            {% endfor %}
        </li>
        {% endmacro %}
    </div>

    <p>
        <button type="submit">Save</button>
    </p>
</form>

<script>

var collectionHolder = $('#menus');

var $addMenuLink = $('<a href="#" class="add_menu_link">Add menu</a>');
var $newLinkMenuLi = $('<li></li>').append($addMenuLink);

$(document).ready(function(){

    $('#menus').append($newLinkMenuLi);

    $.each($('ul.menu'), function(){
        $(this).append('<a href="#"> Add meal </a>');
    });

    $addMenuLink.click( function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();

        // add a new menu form (see next code block)
        addMenuForm(collectionHolder, $newLinkMenuLi);
    });

    function addMenuForm(collectionHolder, $newLinkMenuLi){
        // Get the data-prototype we explained earlier
        var prototype = collectionHolder.attr('data-prototype');

        // Replace '$$name$$' in the prototype's HTML to
        // instead be a number based on the current collection's length.
        var newForm = prototype.replace(/\$\$name\$\$/g, collectionHolder.children().length);

        // Display the form in the page in an li, before the "Add a menu" link li
        var $newFormLi = $('<li></li>').append(newForm);
        $newLinkMenuLi.before($newFormLi);
    }


});

</script>

{% endblock %}

{%extends'：：base.html.twig%}
{%block body%}
饮食创造
{{form_row（form.carries）}}
菜单
{%form.menus%}

{{{u self.prototype（菜单）}

{%endfor%}
{%宏原型（菜单）%}
{{form_row（menu.description）}}

{%用于菜单中的膳食。膳食%}
{{form_row（餐名）}
{%endfor%}

{%endmacro%}

拯救

var collectionHolder=$（“#菜单”）；
变量$addMenuLink=$（''）；
变量$newLinkMenuLi=$（'
）.append（$addMenuLink）；
$（文档）.ready（函数（）{
$（“#菜单”）.append（$newLinkMenuLi）；
$.each（$（'ul.menu'），function（）{
$（此）。附加（“”）；
});
$addMenuLink.单击（函数（e）{
//阻止链接在URL上创建“#”
e、 预防默认值（）；
//添加新的菜单表单（请参见下一个代码块）
addMenuForm（collectionHolder$newLinkMenuLi）；
});
函数addMenuForm（collectionHolder$newLinkMenuLi）{
//获取我们前面解释的数据原型
var-prototype=collectionHolder.attr（'data-prototype'）；
//将原型HTML中的“$$name$$”替换为
//而是一个基于当前集合长度的数字。
var newForm=prototype.replace（/\$\$name\$\$$/g，collectionHolder.children（）.length）；
//在“添加菜单”链接li之前，在页面中的一个li中显示表单
变量$newFormLi=$（'
'）。追加（newForm）；
$newLinkMenuLi.before（$newFormLi）；
}
});
{%endblock%}

关于验证，尝试在您的饮食和菜单实体中添加a，应该可以：）

---

现在，对于表单主题，您可以查看

谢谢您的回答@GeoffreyBrier。但这并不是我想要做的=/对不起，我从来没有尝试过“inception”收集表单集合。你不能简单地把它分成三部分吗？一个用于创建饮食，第二个用于饮食=>菜单集合（为特定饮食添加多个菜单），最后一个用于菜单=>膳食集合（为特定菜单添加多个膳食）。我认为它肯定会更快地实现。该程序的前一个版本使它更容易实现。在这次更新中，我们试图向程序中添加新的dinamic方法。无论如何，谢谢你。