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

时间:2012-07-25 13:11:50

标签: jquery symfony twig

我有三个实体:

  • 饮食,菜单和膳食
  • 饮食有一个菜单集,
  • 菜单中有一份收集的餐食。

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

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

确定。我首先需要的是:

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

我可以在控制器中执行此操作并发送到树枝。但问题是当我'allow_add'时, 动态地添加表格。

这就是问题所在:

enter image description here

代码:

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';
    }
}

Twig模板:

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

1 个答案:

答案 0 :(得分:0)

关于验证,请尝试在Diet和Menu实体上添加validator callback,它应该没问题。)

现在,对于表单主题,您可以查看form theming documentation