@@ -238,7 +238,11 @@ it will receive an *unknown* number of tags. Otherwise, you'll see a
238238
239239The ``allow_add `` option also makes a ``prototype `` variable available to you.
240240This "prototype" is a little "template" that contains all the HTML needed to
241- dynamically create any new "tag" forms with JavaScript. To render the prototype, add
241+ dynamically create any new "tag" forms with JavaScript.
242+
243+ Let's start with plain JavaScript (Vanilla JS) – if you're using Stimulus, see below.
244+
245+ To render the prototype, add
242246the following ``data-prototype `` attribute to the existing ``<ul> `` in your
243247template:
244248
@@ -334,6 +338,49 @@ into new ``Tag`` objects and added to the ``tags`` property of the ``Task`` obje
334338
335339 You can find a working example in this `JSFiddle `_.
336340
341+ JavaScript with Stimulus
342+ ~~~~~~~~~~~~~~~~~~~~~~~~
343+
344+ If you're using `Stimulus `_, wrap everything in a ``<div> ``:
345+
346+ .. code-block :: html+twig
347+
348+ <div {{ stimulus_controller('form-collection') }}
349+ data-form-collection-index-value="{{ form.tags|length > 0 ? form.tags|last.vars.name + 1 : 0 }}"
350+ data-form-collection-prototype-value="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}"
351+ >
352+ <ul {{ stimulus_target('form-collection', 'collectionContainer') }}></ul>
353+ <button type="button" {{ stimulus_action('form-collection', 'addCollectionElement') }}>Add a tag</button>
354+ </div>
355+
356+ Then create the controller:
357+
358+ .. code-block :: javascript
359+
360+ // assets/controllers/form-collection_controller.js
361+
362+ import { Controller } from ' @hotwired/stimulus' ;
363+
364+ export default class extends Controller {
365+ static targets = [" collectionContainer" ]
366+
367+ static values = {
368+ index : Number ,
369+ prototype: String ,
370+ }
371+
372+ addCollectionElement (event )
373+ {
374+ const item = document .createElement (' li' );
375+ item .innerHTML = this .prototypeValue .replace (/ __name__/ g , this .indexValue );
376+ this .collectionContainerTarget .appendChild (item);
377+ this .indexValue ++ ;
378+ }
379+ }
380+
381+ Handling the new Tags in PHP
382+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
383+
337384To make handling these new tags easier, add an "adder" and a "remover" method
338385for the tags in the ``Task `` class::
339386
@@ -662,3 +709,4 @@ the relationship between the removed ``Tag`` and ``Task`` object.
662709.. _`@a2lix/symfony-collection` : https://github.com/a2lix/symfony-collection
663710.. _`symfony-collection` : https://github.com/ninsuo/symfony-collection
664711.. _`ArrayCollection` : https://www.doctrine-project.org/projects/doctrine-collections/en/1.6/index.html
712+ .. _`Stimulus` : https://symfony.com/doc/current/frontend/encore/simple-example.html#stimulus-symfony-ux
0 commit comments