Symfony - 收集表单原型不采用 html class 属性

Question

I'm trying to add a carousel with a collection of slides but I can't style my embedded forms. My prototype skip some class attributes in my form. Documentation here

My CarouselType:

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('slides', CollectionType::class, [
            'entry_type' => SlideType::class,
            'allow_add' => true,
            'allow_delete' => true,
            'prototype' => true,
            'by_reference' => false
        ]);
    }

My SlideType:

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title', TextType::class, [
                'attr' => [
                    'class' => 'form-control'
                ],
                'required' => false
            ])
            ->add('url', UrlType::class, [
                'attr' => [
                    'class' => 'form-control'
                ],
                'required' => false
            ])
            ->add('file', FileType::class);
    }

My carousel_edit.html.twig:

{% extends 'base.html.twig' %}

% block body %}
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-default">
                <div class="card-body">
                    {{ form_start(form) }}
                        <div class="slides" data-prototype="{{ form_widget(form.slides.vars.prototype)|e('html_attr') }}">
                            {% for slide in form.slides %}
                                <div class="slide">
                                    <div class="form-group">
                                        <label for="title">{{ form_label(slide.title) }}</label>
                                        {{ form_widget(slide.title) }}
                                    </div>

                                    <div class="form-group">
                                        <label for="url">{{ form_label(slide.url) }}</label>
                                        {{ form_widget(slide.url) }}
                                    </div>

                                    <div class="form-group">
                                        <label for="file">{{ form_label(slide.file) }}</label>
                                        {{ form_widget(slide.file) }}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>

                    <button type="button" class="add_item_link" data-collection-holder-class="slides">Add a slide</button>

                    <div class="form-footer pt-4 pt-5 mt-4 border-top">
                        <button type="submit" class="btn btn-primary btn-default">Save</button>
                    </div>

                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block javascripts %}
<script>
    jQuery(document).ready(function() {
        var $slidesCollectionHolder = $('div.slides');
        $slidesCollectionHolder.data('index', $slidesCollectionHolder.find('input').length);

        $('body').on('click', '.add_item_link', function(e) {
            var $collectionHolderClass = $(e.currentTarget).data('collectionHolderClass');
            addFormToCollection($collectionHolderClass);
        })

        function addFormToCollection($collectionHolderClass) {
            var $collectionHolder = $('.' + $collectionHolderClass);

            var prototype = $collectionHolder.data('prototype');

            var index = $collectionHolder.data('index');

            var newForm = prototype;

            newForm = newForm.replace(/__name__/g, index);
            console.log(newForm);

            $collectionHolder.data('index', index + 1);

            var $newFormLi = $('<div class="slide"></div>').append(newForm);
            $collectionHolder.append($newFormLi)
        }
    });
</script>
{% endblock %}

What a new add form displaying:

<div class="slide">
  <div id="carousel_slides_3">
    <div>
      <label for="carousel_slides_3_title">Title</label>
      <input type="text" id="carousel_slides_3_title" name="carousel[slides][3][title]" class="form-control">
    </div>
    <div>
      <label for="carousel_slides_3_url">Url</label>
      <input type="text" id="carousel_slides_3_url" name="carousel[slides][3][url]" class="form-control" inputmode="url">
    </div>
    <div>
      <label for="carousel_slides_3_file" class="required">File</label>
      <input type="file" id="carousel_slides_3_file" name="carousel[slides][3][file]" required="required">
    </div>
  </div>
</div>

The new form not displaying class="form-group" attributes.

What's wrong with my configuration or javascript?

Answer 1

It's working by adding class attribute on the SlideType side and using form_row on the template side:

My SlideType:

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title', TextType::class, [
                'row_attr' => [
                    'class' => 'form-group'
                ],
                'attr' => [
                    'class' => 'form-control'
                ],
                'required' => false
            ])
            ->add('url', UrlType::class, [
                'row_attr' => [
                    'class' => 'form-group'
                ],
                'attr' => [
                    'class' => 'form-control'
                ],
                'required' => false
            ])
            ->add('file', FileType::class, [
                'row_attr' => [
                    'class' => 'form-group'
                ],
                'attr' => [
                    'class' => 'form-control'
                ]
            ]);
    }

My carousel_edit.html.twig:

{% block body %}
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-default">
                <div class="card-body">
                    {{ form_start(form) }}
                        <div class="slides" data-prototype="{{ form_widget(form.slides.vars.prototype)|e('html_attr') }}">
                            {% for slide in form.slides %}
                                <div class="slide">
                                    {{ form_row(slide.title) }}
                                    {{ form_row(slide.url) }}
                                    {{ form_row(slide.file) }}
                                </div>
                            {% endfor %}
                        </div>

                    <button type="button" class="btn btn-success add_item_link" data-collection-holder-class="slides">+</button>
                    <button type="button" class="btn btn-danger remove_item_link" data-collection-holder-class="slides">-</button>

                    <div class="form-footer pt-4 pt-5 mt-4 border-top">
                        <button type="submit" class="btn btn-primary btn-default">Save</button>
                    </div>

                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}