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)
    }

}

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