Symfony rendering form only in first row of collection

Question

perhaps somebody can help me because I'm digging forums and documentation since a week how to render a table where I have a form in 3rd column.

I have a class CollectionController with following snippet:

return $this->render(
        'vollmachtapp/pages/collections/list2.html.twig',
        [
            'attachmentForm' => $attachmentForm->createView(),
            'list' => $apiClient->listAllVollmachten()
        ]
    );

The attachmentForm looks like this:

$attachmentForm = $this->createForm( SimpleAttachmentType::class, $attachment );

Here is my SimpleAttachmentType:

class SimpleAttachmentType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
  {
    $builder
        ->add('file', FileType::class)
        ->add('vollmachtId', HiddenType::class)
        ->add('save', SubmitType::class, ['label' => 'Vollmacht hochladen']);
  }
}

Now I'm using a twig which looks like:

<table id="datatable" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>Vollmacht ID</th>
                        <th>Users</th>
                        <th>Upload/Download</th>
                    </tr>
                    </thead>

                    <tbody>

                        {% for collection in list.items %}
                            <tr>
                                <td>{{ collection.id }}</td>
                                <td>
                                    {% for user in collection.users %}
                                        <a href="{{ url('user_detail', {'id': user.id}) }}">
                                            {{ user.name }}
                                        </a><br>
                                    {% endfor %}
                                </td>
                                <td>
                                    <a href="{{ url('downloadVollmacht', {'id': user.id}) }}"><button type="button" class="btn btn-sm btn-primary">Download Vollmacht</button></a>
                                    {% if(app.user.role == "admin") %}
                                    <hr>
                                    <div class="text-center mtop20">
                                        {{ form_start(attachmentForm, {method: 'POST'}) }}
                                            {% if not attachmentForm.vars.valid %}
                                                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    {{ form_errors(attachmentForm.file) }}
                                                </div>
                                            {% endif %}
                                            {{ form_widget(attachmentForm.vollmachtId, {'name': vollmachtId, 'value': collection.id}) }}
                                            {{ form_widget(attachmentForm.file) }}
                                            <br />

                                            {{ form_widget(attachmentForm.save, {attr: {'class': 'btn-left btn btn-sm btn-primary'}}) }}
                                        {{ form_end(attachmentForm) }}
                                    </div>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}

                    </tbody>
                </table>

The problem I have, the form is only rendered in the 1st row of the table. Can anybody tell me what I'm doing wrong and have to change to get it work?

Thanks and best regards, Michael Obster

Answer 1

Your Main Problem is, that you cant seperate this form_snippet multiple times

{{ form_start(attachmentForm, {method: 'POST'}) }}

Your form Start and form End have to be wrapping the hole form. if your want that form also in all tags you cant write the start form twig snippet only in one . You have to write some code like that:

<table id="datatable" class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>Vollmacht ID</th>
                    <th>Users</th>
                    <th>Upload/Download</th>
                </tr>
                </thead>

                <tbody>                 
                        {% for collection in list.items %}
                            <tr>
                                {{ form_start(attachmentForm, {method: 'POST'}) }}
                                <td>{{ collection.id }}</td>
                                <td>
                                    {% for user in collection.users %}
                                        <a href="{{ url('user_detail', {'id': user.id}) }}">
                                            {{ user.name }}
                                        </a><br>
                                    {% endfor %}
                                </td>
                                <td>
                                    <a href="{{ url('downloadVollmacht', {'id': user.id}) }}"><button type="button" class="btn btn-sm btn-primary">Download Vollmacht</button></a>
                                    {% if(app.user.role == "admin") %}
                                    <hr>
                                    <div class="text-center mtop20">

                                            {% if not attachmentForm.vars.valid %}
                                                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    {{ form_errors(attachmentForm.file) }}
                                                </div>
                                            {% endif %}
                                            {{ form_widget(attachmentForm.vollmachtId, {'name': vollmachtId, 'value': collection.id}) }}
                                            {{ form_widget(attachmentForm.file) }}
                                            <br />

                                            {{ form_widget(attachmentForm.save, {attr: {'class': 'btn-left btn btn-sm btn-primary'}}) }}

                                    </div>
                                    {% endif %}
                                </td>
                                {{ form_end(attachmentForm) }}
                            </tr>                               
                        {% endfor %}
                </tbody>
            </table>

But maybe its reconstruct your HTML markup a lil bit.

Answer 2

You should take a look at how to work with a collection of forms in symfony Documentation :

https://symfony.com/doc/current/reference/forms/types/collection.html