zend-form collection doesn't generate right name

Question

I'm currently working with zend-expressive and now I would like to use zend-form to generate a form. Everything is installed properly. I now have the following setup:

<?php

use Zend\Filter;
use Zend\Form\Element;
use Zend\Form\Form;
use Zend\ServiceManager\Exception;
use Zend\Validator;

class CategoryForm extends Form
{
    public function __construct($features = [])
    {
        parent::__construct('category');

        $this->add([
            'name' => 'id',
            'type' => Element\Hidden::class,
        ]);

        $this->add([
            'name' => 'name',
            'type' => Element\Text::class,
            'options' => [
                'label' => 'Name',
            ],
        ]);

        $this->add([
            'name' => 'features',
            'type' => Element\Collection::class,
            'options' => [
                'label' => 'Features',
                'target_element' => new Element\Select('feature', $features),
            ],
        ]);
    }
}

In my template (Twig) I have the following snippet:

{{ form().openTag(form)|raw }}

    {{ formElement(form.get('id')) }}

    {% set element = form.get('name') %}
    <div>
        {{ formLabel(element) }}
        <div>
            {{ formElement(element) }}
        </div>
    </div>

    {% set collection = form.get('features') %}
    {{ formLabel(collection) }}
    {% for element in collection %}
        <div>
            {{ formSelect(element) }}
        </div>
    {% endfor %}

{{ form().closeTag(form)|raw }}

This displays the form nicely. Now my problem. If I try to edit a category, I populate the form like this:

$formData = [
    'id' => $category->getId(),
    'name' => $category->getName(),
    'features' => [
        2,
        3,
    ],
];

$this->categoryForm->setData($formData);

But now the form generates the next snipped:

<form action="" method="POST" name="category">
    <input name="id" value="2" type="hidden">

    <div>
        <label>Name</label>
        <div>
            <input name="name" value="Foo" type="text">
        </div>
    </div>

    <label>Features</label>

    <div>
        <select name="features[0]">
            <option value="1">A</option>
            <option value="2" selected>B</option>
            <option value="3">C</option>
        </select>
    </div>

    <div>
        <select name="1"> <!-- The name is wrong here -->
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3" selected>C</option>
        </select>
    </div>
</form>

As you can see, the second select element has a wrong name. Everything else works great, but the name generation. I don't know if I miss something. I really tried to find some help on other websites but nothing solved the problem. Maybe you see my mistake and can help me to get done with this form.

Thanks alot in advance.

Answer 1

Ok, after a few hours of debugging, I found out, that I used prepare() too early. Now I prepare the form after I used setData and everything works fine.