在 Symfony 表单中添加了 Boostrap Checkbox Collection 缺少 bootstrap init

Question

我目前正在尝试扩展我的 symfony-form 以添加自定义 collection 条目。我尽可能地遵循了手册 https://symfony.com/doc/current/form/form_collections.html（除了表单本身的结构）

（编辑：我使用的是 Smyfony 3.4 和 bootstrap 4 表单样式）

问题是，如果要添加到 Collection-List 的项目的复选框似乎缺少 bootstrap-initialization。因此它根本无法使用。

有没有办法手动初始化复选框？

这是（简化的）代码：

表单类型：

class MissionReportFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('playerparticipations', CollectionType::class, [
                'allow_add'  => true,
                'entry_type' => PlayerParticipationsFormType::class, ]);
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => MissionReport::class,
        ]);
    }
}

class PlayerParticipationsFormType extends AbstractSfoType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('delay', CheckboxType::class, ['required' => false]);
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => PlayerMissionParticipation::class,
        ]);
    }
}

控制器：

$missionReport = new MissionReport();
$missionReport->addPlayerparticipation(new PlayerMissionParticipation());

return $this->render ( 'SfoLcarsBundle::punktedokument.html.twig', array (
    'form' => $this->createForm(MissionReportFormType::class,$missionReport)->createView()
) );

表格

{{ form_start(form) }}
    {{ form_errors(form) }}
        <table class="table table-bordered table-condensed table-responsive" id="punktedokument">
        <tbody id="punktedokument_entrys" data-prototype="&lt;tr&gt;&lt;td&gt;{{ form_widget(form.playerparticipations.vars.prototype.delay)|e('html_attr')}}&lt;/td&gt;&lt;/tr&gt;">
    <tr>
        <th class="col-md-pull-0 col-md-1"></th>
    </tr>
    {{ form_label(form.playerparticipations, 'Punktetabelle') }}
    {% for participation in form.playerparticipations %}
    <tr>
        <td>{{ form_widget(participation.delay) }}</td>
    </tr>
    {% endfor %}
        </tbody>
    </table>
{{ form_end(form) }}

Javascript

    var $collectionHolder;

    var $addParticipationButton = $('<button type="button" class="add_participation_link btn btn-primary">Neuer Eintrag</button>');
    var $newLinkLi = $addParticipationButton;

    jQuery(document).ready(function() {
        $collectionHolder = $('tbody#punktedokument_entrys');
        $collectionHolder.append($newLinkLi);
        $collectionHolder.data('index',$collectionHolder.find('tr').length-1);
        $addParticipationButton.on('click', function(e) {
            addParticipationForm($collectionHolder, $newLinkLi);
        });
    });

    function addParticipationForm($collectionHolder, $newEntry) {
        var prototype = $collectionHolder.data('prototype');
        var index = $collectionHolder.data('index');

        var newForm = prototype;
        newForm = newForm.replace(/__name__/g, index);
        $collectionHolder.data('index', index + 1);
        $newEntry.before(newForm);

    }

HTML初始可用TD:

<td>
    <div class="form-check">        
       <div class="icheckbox_minimal" aria-checked="false" aria-disabled="false" style="position: relative;">
<input type="checkbox" id="mission_report_form_playerparticipations_0_missing" name="mission_report_form[playerparticipations][0][missing]" class="form-check-input" value="1" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
       <label class="form-check-label" for="mission_report_form_playerparticipations_0_missing">Missing</label>
    </div>
</td>

添加的 TD 的结果 HTML：

<td>
    <div class="form-check">
        <input type="checkbox" id="mission_report_form_playerparticipations_1_missing" name="mission_report_form[playerparticipations][1][missing]" class="form-check-input" value="1">
        <label class="form-check-label" for="mission_report_form_playerparticipations_1_missing">Missing</label>
    </div>
</td>

Result on the page - missing the Checkboxes

Answer 1

因为我不是非常高级的 Web 开发人员并且我支持的项目是由另一个人创建的，所以我怀疑复选框是 bootstrap 复选框是不正确的。

事实上，它是一个 jquery 复选框，我可以通过 .icheck()

对其进行初始化

现在可以了。尽管如此，还是要感谢你们俩:)

在 Symfony 表单中添加了 Boostrap Checkbox Collection 缺少 bootstrap init

Added Boostrap Checkbox in Symfony Form Collection missing bootstrap init

symfony-forms

symfony

twig

bootstrap-4