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

Question

我有三个实体：

• 饮食，菜单和膳食
• 饮食方面有菜单的一个集合，
• 菜单有膳食之一collectiion。

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

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

好的。我首先需要的是：

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

我可以在控制器中做到这一点，并发送到树枝。但问题是当我'allow_add'， 动态添加表单。

这就是问题所在：

代码：

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

Answer 1

关于验证，尝试添加上一个validator callback您饮食和菜单实体，它应该是OK :)

现在的形式主题，你可以去看看form theming documentation