Symfony - 集合表单原型不采用 html 类属性答案

【问题标题】：Symfony - Collection Form prototype not taking html class attributesSymfony - 集合表单原型不采用 html 类属性
【发布时间】：2021-03-13 08:22:35
【问题描述】：

我正在尝试添加带有一组幻灯片的轮播，但我无法设置嵌入表单的样式。我的原型在我的表单中跳过了一些类属性。 Documentation here

我的轮播类型：

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

我的幻灯片类型：

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

我的 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 %}

显示了一个多么新的添加表单：

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

新表单不显示class="form-group" 属性。

我的配置或 javascript 有什么问题？

【问题讨论】：

你在哪里使用 jQuery？
在他的区块javascripts...
@quantumPuter 看看我的 carousel_edit.html.twig
Symfony 和 twig 专家可能会通过查看此代码来提供帮助。但是，如果您希望 HTML、CSS 和/或 jQuery 专家提供帮助，您应该发布生成的 HTML，并最好在 jsfiddle 中显示生成的 HTML 中的类的 CSS 样式信息。

标签： javascript jquery symfony twig

【解决方案1】：

通过在 SlideType 端添加类属性并在模板端使用 form_row 来工作：

我的幻灯片类型：

    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'
                ]
            ]);
    }

我的 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 %}

【讨论】：