title: Customize data-prototype attribute in Symfony 2 forms
body: <p>I am trying to follow the Symfony 2.7 docs to create <a href="http://symfony.com/doc/2.7/cookbook/form/form_collections.html" rel="nofollow">Embed a Collection of Forms</a> using a <a href="http://symfony.com/doc/2.7/cookbook/form/form_customization.html#cookbook-form-custom-prototype" rel="nofollow">custom Collection Prototype</a>.</p>
  
  <p><strong>Problem is, that I am not able to create a custom collection prototype as described in the docs.</strong></p>
  
  <p>As in the example there are two simple classes: 
  A <code>Task</code> class that manages the description of the task and additionally any number of tags, represented by its own <code>Tag</code> class</p>
  
  <pre><code>class Task {
      protected $description;
      protected $tags;
  
      public function __construct() {
          $this-&gt;tags = new array();
      }
  
      // Getter &amp; Setter for description + additional addTag &amp; removeTag methods
      // ...
  
      // Tags getter
      public function getTags() {
          return $this-&gt;tags;
      }
  }
  
  class Tag {
      protected $name;
      // ... setName(...), getName()...
  }
  </code></pre>
  
  <p><strong>These are the custom form types:</strong></p>
  
  <pre><code>class TaskType extends AbstractType {
      public function buildForm(FormBuilderInterface $builder, array $options) {
          $builder-&gt;add('description');
          $builder-&gt;add('tags', 'collection', array('type' =&gt; new TagType()));
      }
  
      public function getName() {
          return 'task';
      }
  
      // ...
  }
  
  
  class TagType extends AbstractType {
      public function buildForm(FormBuilderInterface $builder, array $options) {
          $builder-&gt;add('name');
      }
  
      public function getName() {
          return 'tag';
      }
  
      // ...
  }
  </code></pre>
  
  <p><strong>Twig file to render the form</strong></p>
  
  <pre><code>{{ form_start(form) }}
      {# render the task's only field: description #}
      {{ form_row(form.description) }}
  
      {# render tags - use table instead of ul as in example #}
      &lt;div class="table-responsive"&gt;
          &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;th&gt;{{ 'task.tag.headline'|trans }}&lt;/th&gt;    
              &lt;/thead&gt;
              &lt;tbody class="tags-container" data-prototype="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}"&gt;   
                  {{ form_row(form.rules) }}          
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  {{ form_end(form) }}
  </code></pre>
  
  <p>This works fine and renders the <code>tags</code> list inside the table. <strong>However, this code uses the default prototype, that (of course) does not create table rows for the different tags.</strong></p>
  
  <p>I tried to add the code to use a <strong>custom prototype</strong> as <a href="http://symfony.com/doc/2.7/cookbook/form/form_customization.html#cookbook-form-custom-prototype" rel="nofollow">described in the docs</a>. How ever the docs does not say anything about where to add this code or how to use it:</p>
  
  <p><strong>Twig code WITH custom prototype code</strong></p>
  
  <pre><code>{{ form_start(form) }}
      {# Custom Prototype Code from docs #}
      {% form_theme form _self %}
  
      {% block _tags_entry_widget %}
          &lt;tr&gt;
              &lt;td&gt;{{ form_widget(form.name) }}&lt;/td&gt;
          &lt;/tr&gt;
      {% endblock %} 
  
  
      {# render the task's only field: description #}
      {{ form_row(form.description) }}
  
      {# render tags - use table instead of ul as in example #}
      &lt;div class="table-responsive"&gt;
          &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;th&gt;{{ 'task.tag.headline'|trans }}&lt;/th&gt;    
              &lt;/thead&gt;
              &lt;tbody class="tags-container" data-prototype="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}"&gt;   
                  {{ form_row(form.rules) }}          
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  {{ form_end(form) }}
  </code></pre>
  
  <p>Using the custom prototype code like this results in the error:</p>
  
  <blockquote>
    <p>Method "name" for object "Symfony\Component\Form\FormView" does
    not exist in "MyAppBundle:Task:task.html.twig" </p>
  </blockquote>
  
  <p>This sounds reasonable, since <code>name</code> belongs to the <code>Tag</code> class and not to the <code>Task</code> class. </p>
  
  <p><strong>Problem 1:</strong> How to use/access the <code>Tag</code> form inside the template?**</p>
  
  <p>I removed <code>&lt;td&gt;{{ form_widget(form.name) }}&lt;/td&gt;</code> from the prototype template and replaced it with <code>&lt;td&gt;Test&lt;/td&gt;</code> to see if the template is used. The result: The template is NOT used and has no effect.</p>
  
  <p><strong>Problem 2:</strong> What is the correct way to set/activate the prototype template?</p>
  
  <p>I found other threads dealing with prototype question/problems. The answers propose different solutions using macros, external twig files, etc. <strong>Since the Symfony docs seems to offer a solution within the same file without using hacks like macros, I would like to know implement this solution.</strong></p>