Stimulus.js controller for Symfony collection form type with configurable item limit

example_form.html.twig

{% macro collection_item(form) %}
    <div data-form-collection-target="field">
        {{ form_widget(form) }}
        <button type="button" 
                data-action="form-collection#removeItem">
            remove
        </button>
    </div>
{% endmacro %}

{% import _self as formMacros %}

{{ form_start(form) }}
<div data-controller="form-collection"
     data-form-collection-max-items-value="10"
     data-form-collection-prototype-value="{{ formMacros.collection_item(form.collectionField.vars.prototype)|json_encode }}">
    <div data-form-collection-target="fields">
        {% do form.collectionField.setRendered %}
        {% for field in form.collectionField %}
            {{ formMacros.collection_item(field) }}
        {% endfor %}
    </div>
    <button type="button" 
            data-action="form-collection#addItem" 
            data-form-collection-target="addButton">
        add
    </button>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}

formcollection_controller.js

import { Controller } from 'stimulus'

export default class extends Controller {

    static targets = [ 'fields', 'field', 'addButton' ]
    static values = {
        prototype: String,
        maxItems: Number,
        itemsCount: Number,
    }

    connect() {
        this.index = this.itemsCountValue = this.fieldTargets.length
    }

    addItem() {
        let prototype = JSON.parse(this.prototypeValue)
        const newField = prototype.replace(/__name__/g, this.index)
        this.fieldsTarget.insertAdjacentHTML('beforeend', newField)
        this.index++
        this.itemsCountValue++
    }

    removeItem(event) {
        this.fieldTargets.forEach(element => {
            if (element.contains(event.target)) {
                element.remove()
                this.itemsCountValue--
            }
        })
    }

    itemsCountValueChanged() {
        if (false === this.hasAddButtonTarget || 0 === this.maxItemsValue) {
            return
        }
        const maxItemsReached = this.itemsCountValue >= this.maxItemsValue
        this.addButtonTarget.classList.toggle('hidden', maxItemsReached)
    }

}

The addButton target is not used inside the html.

Instead of

    <button data-action="form-collection#addItem">
        add
    </button>

It should be:

     <button data-form-collection-target="addButton">
         add
     </button>

Than you need to add the eventListener manually.

 connect() {
     this.index = this.itemsCountValue = this.fieldTargets.length
     this.hasAddButtonTarget && this.addButtonTarget.addEventListener('click', event => this.addItem(event))
 }

Hi @MichaelBrauner,

the target is used to control if the add-button should be rendered or not depending on a possible upper limit of elements (see itemsCountValueChanged(). Moreover adding of event-handlers should be left to the framework to ensure they will be removed automatically as well.

Cheers
Björn

Ok. The eventListener should be set with a data-action attribute. I did it this way because so I have not to set the target and the action. But u are right. It might be better to use the framework for that.

But the data-form-collection-target on the button is missing anyway in your example html.

The itemsCountValueChanged() function can not set a hidden class on a non existing target.

Yes, you are right. I added the missing target, thanks.

thanks for posting this. it helped me implement my collection form with a stimulus controller. i had to omit the this.itemsCountValue-- line - otherwise when the user adds and removes items before saving, the indexes get mixed up, which can lead to overwriting items. and if the user adds, then remove any other line than the one just added, there is a gap in the index anyways, so reducing the count does not help. (if you limit the total number of items in the collection, you still need that, but can't savely use it for the id of new items)

instead, i use the 'keep_as_list' => true, option for the CollectionType form element. that converts the array to a consecutive list to avoid any holes in the array which could lead to issues e.g. when json serializing.

Ah, thanks a lot for the hint. I didn't know about this option yet!

ah, it is pretty recent, was added in symfony 7.1