Symfony 4.4如何使用collectionType从0个字段开始

Posted 2023-02-16

【中文标题】Symfony 4.4如何使用collectionType从0个字段开始

【英文标题】：Symfony 4.4 how to start with 0 fields using a collectionType

【发布时间】：2021-11-19 11:47:14

【问题描述】：

我的表单中有一个基于实体的 collectionType。我希望用户能够根据不同的字段动态添加新字段。所以在页面加载时，我希望显示 0 个字段。在用户填写所有字段以使生成过程成为可能并且用户单击“下一步”按钮后，应添加新的集合字段。

目前，symfony 表单总是生成 1 个字段。但由于我还没有给它任何数据，它只显示一个空的 div。但它破坏了我的 javascript :(

我知道我可以为此做一个解决方法，但我希望这个字段根本不生成。在用户点击“下一步”按钮之前，不应制作任何 html 内容。

这是我收集的表格部分：

// Builder ...
->add('contracts', CollectionType::class, [
    'entry_type' => ContractsType::class,
    'entry_options' => ['label' => false],
    'allow_add' => true,
    'allow_delete' => true,
    'by_reference' => false,
])

这是合同类型：

->add('start_date', WeekType::class, [
    'label_attr' => [
        'class' => 'bold',
    ],
    'attr' => [
        'class' => 'input-margin',
    ],
    'input' => 'array',
    'widget' => 'choice',
])
->add('end_date', WeekType::class, [
    'label_attr' => [
        'class' => 'bold',
    ],
    'attr' => [
        'class' => 'input-margin',
    ],
    'input' => 'array',
    'widget' => 'choice',
])
->add('contract_hours', TextType::class, [
    'label_attr' => [
        'class' => 'bold',
    ],
    'attr' => [
        'class' => 'input-text input-margin',
        'placeholder' => 'Vul het aantal contract uren in',
        'min' => 0,
        'max' => 60
    ]
])

我的树枝：

# Startdate, enddate and contract hours fields. Data sets are specific for each field since I need nice styling. #
<div id="ContractFields" class="contracts"
    data-start-label=" form_label(userEntityForm.contracts.vars.prototype.start_date, 'Begintijd')|e('html_attr') " 
    data-start-date-year=" form_widget(userEntityForm.contracts.vars.prototype.start_date.year,  attr:  class: 'select-field mr-1' )|e('html_attr') "
    data-start-date-week=" form_widget(userEntityForm.contracts.vars.prototype.start_date.week,  attr:  class: 'select-field' )|e('html_attr') "
    data-end-label=" form_label(userEntityForm.contracts.vars.prototype.end_date, 'Eindtijd')|e('html_attr') "
    data-end-date-year=" form_widget(userEntityForm.contracts.vars.prototype.end_date.year,  attr:  class: 'select-field mr-1' )|e('html_attr') "
    data-end-date-week=" form_widget(userEntityForm.contracts.vars.prototype.end_date.week,  attr:  class: 'select-field' )|e('html_attr') "
    data-hours-label=" form_label(userEntityForm.contracts.vars.prototype.contract_hours, 'Contract uren')|e('html_attr') "
    data-hours=" form_widget(userEntityForm.contracts.vars.prototype.contract_hours, 'type' : 'number')|e('html_attr') ">
    
    // This if is here for testing, doesn't do much about the generating part.
    % if userEntityForm.contracts is empty %
        #  form_widget(userEntityForm.contracts)  #
    % else %
        % for contract in userEntityForm.contracts %

            # Class to make sure it is known in JS how many contract fields have been added. #
            <div class="d-none class-to-count-amount-of-fields">

                <div class="d-flex">

                    # Contract start date field #
                    <div class="mr-2">
                         form_label(contract.start_date, 'Begintijd') 
                        <div class="input-margin">
                            - form_widget(contract.start_date.year,  attr:  class: 'select-field mr-1' ) -
                            - form_widget(contract.start_date.week,  attr:  class: 'select-field' ) -
                        </div>
                    </div>

                    # Contract end date field. #
                    <div>
                         form_label(contract.end_date, 'Eindtijd') 

                        <div class="input-margin">
                            - form_widget(contract.end_date.year,  attr:  class: 'select-field mr-1' ) -
                            - form_widget(contract.end_date.week,  attr:  class: 'select-field' ) -
                        </div>
                    </div>
                </div>

                # Contract hours field. #
                <div>
                     form_label(contract.contract_hours, 'Contract uren') 
                     form_widget(contract.contract_hours, 'type' : 'number') 
                </div>
            </div>

        % endfor %
    % endif %
</div>

我的 Javascript：

// Only generate the remaining contracts. We dont want more than the user asks for.
for (let i = contracts.length; i < userEntityFormAmountOfContracts.value; i++) 

    // Get the data-prototype from _form.html.twig.
    var startLabel = contractFields.dataset.startLabel;
    var startDateYear = contractFields.dataset.startDateYear;
    var startDateWeek = contractFields.dataset.startDateWeek;
    var endLabel = contractFields.dataset.endLabel;
    var endDateYear = contractFields.dataset.endDateYear;
    var endDateWeek = contractFields.dataset.endDateWeek;
    var hoursLabel = contractFields.dataset.hoursLabel;
    var contractHours = contractFields.dataset.hours;

    // get the current index.
    var index = contractFields.dataset.index;

    // Replace '__name__' in the prototype's HTML to instead be a number based on how many items we have.
    startLabel = startLabel.replace(/__name__/g, index);
    startDateYear = startDateYear.replace(/__name__/g, index);
    startDateWeek = startDateWeek.replace(/__name__/g, index);
    endLabel = endLabel.replace(/__name__/g, index);
    endDateYear = endDateYear.replace(/__name__/g, index);
    endDateWeek = endDateWeek.replace(/__name__/g, index);
    hoursLabel = hoursLabel.replace(/__name__/g, index);
    contractHours = contractHours.replace(/__name__/g, index);

    // Create extra elements.
    var contractsContainer = document.createElement('div');
    contractsContainer.classList.add("d-none", "class-to-count-amount-of-fields");

    var datesContainer = document.createElement('div');
    datesContainer.classList.add("d-flex");

    // Start date container. (label + input).
    var startDateContainer = document.createElement('div');
    startDateContainer.classList.add("mr-2");

    // Start date container. (label + input).
    var startDateInputContainer = document.createElement('div');
    startDateInputContainer.classList.add("input-margin");

    // End date container. (label + input).
    var endDateContainer = document.createElement('div');

    // Start date container. (label + input).
    var endDateInputContainer = document.createElement('div');
    endDateInputContainer.classList.add("input-margin");

    // Contract hours container. (label + input).
    var contractHoursContainer = document.createElement('div');

    // Add labels and field container to time container.
    startDateContainer.insertAdjacentHTML('beforeend', startLabel);
    endDateContainer.insertAdjacentHTML('beforeend', endLabel);
    contractHoursContainer.insertAdjacentHTML('beforeend', hoursLabel);

    // Add date input fields. (from prototype). insertAdjacentHTML means that html in string format will be transformed.
    startDateInputContainer.insertAdjacentHTML('beforeend', startDateYear);
    startDateInputContainer.insertAdjacentHTML('beforeend', startDateWeek);
    endDateInputContainer.insertAdjacentHTML('beforeend', endDateYear);
    endDateInputContainer.insertAdjacentHTML('beforeend', endDateWeek);
    contractHoursContainer.insertAdjacentHTML('beforeend', contractHours);

    startDateContainer.appendChild(startDateInputContainer);
    endDateContainer.appendChild(endDateInputContainer);

    // Add time containers to clocking times container.
    datesContainer.appendChild(startDateContainer);
    datesContainer.appendChild(endDateContainer);

    // Adding the input field parts.
    contractsContainer.appendChild(datesContainer);
    contractsContainer.appendChild(contractHoursContainer);

    // Append all, sticking together, elements to the container with all other sticking elements (contractsContainers).
    contractFields.appendChild(contractsContainer);

    // Set default values.
    const currentDate = new Date();
    startDateInputContainer.children[0].value = 2021;
    startDateInputContainer.children[1].value = 1;
    endDateInputContainer.children[0].value = 2021;
    endDateInputContainer.children[1].value = isISOLeapYear(currentDate.getFullYear()) ? 53 : 52;

    // Increase the index with one for the next item.
    contractFields.dataset.index = parseInt(index) + 1;

【问题讨论】：

您能添加您的 twig/html/javascript 代码吗？

@Marleen 我添加了它，但我不得不说我认为即使我删除了所有这些 javascript 代码等，它仍然会默认生成 1 个字段。它还显示标签。

如果您看到整个集合的标签（在您的情况下可能应该是“合同”），您可以通过在父表单中添加 'label' => false 来删除它，如下所示：@987654326 @。不删除此标签也可以向 DOM 添加一个空 div，这可能是您看到的额外字段？

@Marleen wauw，是的......就是这样。我添加了它，现在它全部消失了。我猜entry_options 的标签属性确实删除了不同的标签。无论如何，tnx很多！如果您将其添加为答案，我可以接受它：)

已添加，我想研究一下为什么额外的 html 元素仅在某些情况下才会出现，然后才回答。 :)

【参考方案1】：

如果您看到整个集合的标签（在您的情况下可能应该是“合同”），您可以通过将 'label' => false 添加到父表单来删除它，如下所示：

// Builder ...
->add('contracts', CollectionType::class, [
    'label' => false,
    ...
])

调用form_end(form)时，Symfony 会检查是否有您忘记手动渲染的字段。它通过在每个字段 (FormView) 上调用 isRendered 方法来完成此操作，然后将缺少的字段添加到表单的末尾。对于缺少的集合，这会添加（取决于表单主题）<div> 和 <label> 以及包含子表单（如果有）的容器 <div>。

如果集合作为一个整体（form_row(collection) 或 form_widget(collection)）或其所有子表单（form_row(child) 或 form_widget(child)）被渲染，则 isRendered 方法返回 true。在特殊情况下，您正在使用循环单独呈现子表单，但还没有子表单，isRendered 返回 false 并且额外的字段被添加到表单的末尾。

上述解决方案仅从表单中删除<label>。

更好的解决方案可能是将'render_rest': false 添加到form_end(form) 标记以禁用所有其他字段的呈现： form_end(form, 'render_rest': false)

编辑：调用form_end(form)时Symfony也会渲染crsf字段，所以使用'render_rest': false时，你需要使用 form_widget(form._token) 手动渲染这个。