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

}

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