0

我有三个实体：

  • 饮食、菜单和膳食
  • 饮食有一组菜单，
  • 菜单有一组餐点。

所以我必须为Diet 创建一个嵌入式表单。

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

好的。我首先需要的是：

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

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

那就是问题所在：

在此处输入图像描述

编码：

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 %}
4

1 回答 1

0

关于验证，尝试在您的饮食和菜单实体上添加验证器回调，它应该没问题:)

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

于 2012-07-25T15:36:39.257 回答