0

I have a entity based collectionType in my form. I want users to be able to dynamicly add new fields based on a different field. So at the page load I want 0 fields to be shown. After the user filled in all the fields to make the generation process possible and the user clicked the "next" button the new collection fields should be added.

Currently, symfony forms always generates 1 field. But since I gave no data to it yet, it only shows a empty div. But it breaks my Javascript :(

I know I could just do a workaround for this, but I want this field to not be generated at all. No html content should be made before the users clicked the "next button".

This is my collection part of the form:

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

This is the ContractsType:

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

My twig:

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

My 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;
}
Allart
  • 830
  • 11
  • 33
  • Could you add your twig/html/javascript code? – Marleen Sep 27 '21 at 10:02
  • @Marleen I added it, but I have to say that I think that even when I remove all this javascript code etc. it would still generate 1 field by default. It also shows the label. – Allart Sep 27 '21 at 10:11
  • 1
    If you're seeing a label for the entire collection (which should probably read "Contracts" in your case) you can remove that by adding `'label' => false` to the parent form, like this: `->add('contracts', CollectionType::class, ['label' => false, ... ])`. Not removing this label can also add an empty div to the DOM, which might be the extra field you're seeing? – Marleen Sep 27 '21 at 11:22
  • @Marleen wauw, yep... Thats it. I added it and now its all gone. I guess the label attribute to `entry_options` does remove a different label. Anyway, tnx alot! If you add it as an answer I can accept it as one :) – Allart Sep 27 '21 at 11:27
  • @Marleen you can write an answer? I can accept it. Otherwise I will. – Allart Sep 28 '21 at 05:32
  • 1
    Added, I wanted to do some research as to why the extra html elements only show up on some occasions before answering. :) – Marleen Sep 28 '21 at 07:13

1 Answers1

1

If you're seeing a label for the entire collection (which should probably read "Contracts" in your case) you can remove that by adding 'label' => false to the parent form, like this:

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

When calling form_end(form) Symfony checks to see if there are any fields that you forgot to render manually. It does this by calling the isRendered method on each field (FormView) and then adds the missing fields to the end of the form. For a missing collection this adds (depending on form theme) a <div> with a <label> and a container <div> that holds the child-forms (if any).

The isRendered method returns true if the collection as a whole (form_row(collection) or form_widget(collection)) OR all of its child-forms (form_row(child) or form_widget(child)) were rendered. In the special case where you're rendering the child-forms individually using a loop, but there are no child-forms yet, isRendered returns false and the extra fields are added to the end of the form.

The solution above only removes the <label> from the form.

A better solution might be to add {'render_rest': false} to the form_end(form) tag to disable the rendering of all additional fields: {{ form_end(form, {'render_rest': false}) }}

Edit: When calling form_end(form) Symfony also renders the crsf field, so when using {'render_rest': false}, you need to render this manually using {{ form_widget(form._token) }}.

Marleen
  • 2,245
  • 2
  • 13
  • 23