Page with form fields of 2 different forms "interweaven"-CodePudding

I have the following issue, and I don't see what I’m doing wrong. So I have a page (Symfony 6) where, in one controller, I handle 2 forms for one page (one is to upload/handle files, and the other one is for adding other fields and doing the “final submit”). It have to be 2 separate forms because at the back-end different procedures are called for the handling of the file /fields.

When I put all the form fields for the one form and then all the form fields for the second form in two different blocks where one block is entirely before/after the other one, both of the save buttons work. When I however “intermingle” the two form fields then the save button of the “main” form doesn't work. Inspecting the HTML page doesn’t really reveals a lot. So this works:

<div>
    {{ form_start(form, { 'attr': {'novalidate': 'novalidate', 'autocomplete': 'chrome-off', 'class': 'needs-validation'} }) }}
    <h2>{{ template['REF_NAME'] }}</h2>
    {{ form_row(form.remark) }}
    {{ form_row(form.save, {'attr':{ 'style':'height: 3em; margin-top: 38px','class':'py-0 btn btn-success'}}) }}
    {{ form_row(form._token) }}
    {{ form_end(form, {'render_rest': false}) }}
</div>
<div>
    {{ form_start(formannex, { 'attr': {'novalidate': 'novalidate', 'autocomplete': 'chrome-off', 'class': 'needs-validation'} }) }}
    {{ form_row(formannex.annex) }}
    {{ form_widget(formannex.save, {'attr':{'style':'height: 2em; margin-top: 38px','class':'py-0 btn btn-primary'}}) }}
    {{ form_row(formannex._token) }}
    {{ form_end(formannex, {'render_rest': false}) }}
</div>

And for this one the “form.save” does not work.

<div>
    {{ form_start(form, { 'attr': {'novalidate': 'novalidate', 'autocomplete': 'chrome-off', 'class': 'needs-validation'} }) }}
        <h2>{{ template['REF_NAME'] }}</h2>
        {{ form_row(form.remark) }}
            <div>
                {{ form_start(formannex, { 'attr': {'novalidate': 'novalidate', 'autocomplete': 'chrome-off', 'class': 'needs-validation'} }) }}
                {{ form_row(formannex.annex) }}
                {{ form_widget(formannex.save, {'attr':{'style':'height: 2em; margin-top: 38px','class':'py-0 btn btn-primary'}}) }}
                {{ form_row(formannex._token) }}
                {{ form_end(formannex, {'render_rest': false}) }}
            </div>
    {{ form_row(form.save, {'attr':{ 'style':'height: 3em; margin-top: 38px','class':'py-0 btn btn-success'}}) }}
    {{ form_row(form._token) }}
    {{ form_end(form, {'render_rest': false}) }}
</div>

am I missing something obvious?

CodePudding user response：

The answer of Charlie Lucas is indeed 100% correct and should be an accepted answer (but I cannot choose a comment as answer). This link also helped me out: https://symfony.com/doc/current/form/form_collections.html