symfony form collection : how to figure out if allow_delete is set o true

Question

I have built a javascript macro and a form theme to render form collections on my website with symfony2.

{{ if prototype is defined }}, I add a 'Add button'. So far I also have a delete button.

I would like to remove this delete button if 'allow_delete' is not set to true but I can't figure out how to find this in twig.

When I look at my field.vars, there is no allow_delete option. field.vars.attr does not either. How can I do this?

Answer 1

For those who might be interested, here is my complete solution:

• Collections are rendered as tables. Headers are labels or the string 'option' in case of a checkbox.

• If the attribute data-label is set in the form, the option is
  replaced by the value of data-label.

• If allow_add is set to true, an add button is added

• if allow_delete is set to true, a delete button is added.

  {% block collection_widget %}
      {% spaceless %}
          <div class="collection">
              {% if prototype is defined %}
                  {% set attr = attr|merge({'data-prototype': block('collection_item_widget') }) %}
              {% endif %}
  
          {% if form.vars.allow_delete is defined and form.vars.allow_delete %}
              {% set allow_delete = true %}
          {% else %}
              {% set allow_delete = false %}
          {% endif %}
  
          <div {{ block('widget_container_attributes') }} class="protoype">
              {% if prototype is defined %}
              <a href="#" class="add_button btn btn-default btn-sm">Ajouter&nbsp;&nbsp;<i class="fa fa-plus"></i></a>
              {% endif %}
              {{ form_errors(form) }}
              <table class="subtable table">
                  <thead>
                      <tr class="headers" style="display: none;">
                          {% if form.children|length > 0 %}
                              {% if form.children[0]|length > 0 %}
                                  {% set header = form.children[0] %}
                                  {{ block('collection_header') }}
                              {% endif %}
                          {% endif %}
                      </tr>
                  </thead>
                  <tbody class="container_rows">
  
                  {% for rows in form %}
                  {% spaceless %}
                      {% if rows.children|length > 0 %}
                          <tr class="row_to_delete child_collection">
                              {% set body = rows %}
                              {{ block('collection_body') }}
                          </tr>
                      {% endif %}
                  {% endspaceless %}
                  {% endfor %}
  
                  </tbody>
              </table>
              {#{{ form_rest(form) }}#}
          </div>
      </div>
  {% endspaceless %}
  

  {% endblock collection_widget %}

  {% block collection_item_widget %} {% set header = prototype %} {% set body = prototype %} {% spaceless %} {{ block('collection_body') }} {% endspaceless %} {% endblock collection_item_widget %}

  {% block collection_header %}
      {% for field in header %}
          <th>
              {% if 'checkbox' not in field.vars.block_prefixes %}
                  {{ form_label(field)|raw }}
              {% else %}
                  {% if field.vars.attr['data-label'] is defined %}
                      {{ field.vars.attr['data-label'] }}
                  {% else %}
                      Options
                  {% endif %}
              {% endif %}
          </th>
          {% endfor %}
          {% if allow_delete %}
              <th class="fmu_table_center">Supprimer</th>
          {% endif %}
      {% endblock %}
  
      {% block collection_body %}
  
      {% set fieldNum = 1 %}
      {% for field in body %}
          <td class="field{{ fieldNum }} data-label">
              {% if field.vars.attr['class'] is defined %}
                  {% set class = field.vars.attr['class'] ~ ' input-sm' %}
              {% else %}
                  {% set class = 'input-sm' %}
              {% endif %}
              {% set attr = field.vars.attr|merge({'class': class }) %}
              {{ form_widget(field, {'attr' : attr}) }}
              {{ form_errors(field) }}
          </td>
          {% set fieldNum = fieldNum + 1 %}
      {% endfor %}
      {% if allow_delete %}
          <td class="fmu_table_center fmu_table_middle"><a href="#" class="fmu_delete_button"><i class="fa fa-times"></i></a></td>
      {% endif %}
  {% endblock %}
  

  and my javascript :

  {% macro javascript_form_collection() %}
      {#ass the necessary javascript to handle a collection#}
      <script>
          $(function() {
              $('.collection').each(function(){
  
                  var $container = $(this).children('div:first-child');
  
                  var $addButton = $container.children('.add_button').eq(0);
  
                  $addButton.on('click', function(e) {
                      addElement($container,index);
                      count++;
                      index++;
                      showHeaders($container, count);
                      e.preventDefault();
                      return false;
                  });
  
                  var count = $container.find('.child_collection').length;
                  var index = $container.find('.child_collection').length;
  
                  if (count == 0)
                  {
                      populateHeaders($container)
                  }
  
                  $container.on('click','.fmu_delete_button', function(e){
                      e.preventDefault();
                      var $row = $(this).closest('.row_to_delete');
                      $row.next('.sibling_row_to_delete').remove();
                      $row.next('.sibling_row_to_delete_2').remove();
  
                      $row.remove();
                      count--;
                      showHeaders($container, count);
                  });
  
                  showHeaders($container, count);
  
              });
  
              function populateHeaders($container)
              {
                  var $headers = $container.find('.headers').eq(0);
                  var $prototype = $($container.attr('data-prototype'));
                  var $headerPrototype = $($prototype[0]).attr('data-label');
  
                  $headers.html($headerPrototype);
  
              }
  
              function showHeaders($container, count)
              {
                  if (count > 0)
                  {
                      $container.find('.subtable .headers').show();
                  }
                  else
                  {
                      $container.find('.subtable .headers').hide();
                  }
              }
  
              function addElement($container, index) {
                  var $prototype = $($container.attr('data-prototype')
                          .replace(/__name__label__/g, 'n°' + (index+1))
                          .replace(/__name__/g, index));
                  $container.find('.container_rows').eq(0).append($prototype);
                  $('.timepicker').timepicker();
                  $('.datetimepicker').datetimepicker();
                  $prototype.find('.select2').each(function(){
                      $(this).select2();
                  });
                  $('[data-toggle="tooltip"]').tooltip();
                  return $prototype;
              }
  
          });
      </script>
  
  
      <style type="text/css">
  
          .subtable {
              width: 100%;
          }
  
          .subtable th {
              font-weight: normal;
          }
  
      </style>
  {% endmacro %}
  

Answer 2

The allow_delete option is a children of you form field.

{% for widget in form.YOURFIELD.children %}
    {% if widget.get('allow_delete') %}
        //Do your stuff
    {% endif %}
{% endfor %}