django crispy forms: Nesting a formset within a form

Question

I have a django Formset that I'd like to layout in the middle of another form. I'm using django-crispy-forms to set the layout in the parent form's __init__:

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Field, Div
def __init__(self, *args, **kwargs):
    self.helper = FormHelper()
    self.helper.layout = Layout(
        Div(
            Div(Field('foo'), css_class='span3'),
            Div(Field('bar'), css_class='span4'),
            css_class='row'
            ),
        Field('baz', css_class='span1'),
            ...
            )
    self.helper.add_input(Submit('submit', 'Submit', css_class='btn btn-primary offset4'))

My template simply renders the form using the {% crispy %} tag.

I'd like to know how I should incorporate the formset. Should I instantiate it in the above init function? How do I refer to it there?

There are other examples of form and formset combos online that have one render after the other serially, but I'm wondering whether I can have more control over how they fit together with crispy's layout.

qris · Accepted Answer · 2014-03-21T11:07:51.373

I solved this without modifying Crispy Forms, by creating a new field type that renders a formset:

from crispy_forms.layout import LayoutObject, TEMPLATE_PACK

class Formset(LayoutObject):
    """
    Layout object. It renders an entire formset, as though it were a Field.

    Example::

    Formset("attached_files_formset")
    """

    template = "%s/formset.html" % TEMPLATE_PACK

    def __init__(self, formset_name_in_context, template=None):
        self.formset_name_in_context = formset_name_in_context

        # crispy_forms/layout.py:302 requires us to have a fields property
        self.fields = []

        # Overrides class variable with an instance level variable
        if template:
            self.template = template

    def render(self, form, form_style, context, template_pack=TEMPLATE_PACK):
        formset = context[self.formset_name_in_context]
        return render_to_string(self.template, Context({'wrapper': self,
            'formset': formset}))

It needs a template to render the formset, which gives you control over exactly how it's rendered:

{% load crispy_forms_tags %}

<div class="formset">
    {% crispy formset %}
    <input type="button" name="add" value="Add another" />
</div>

You can use it to embed a formset in your layouts just like any other Crispy layout element:

self.helper.layout = Layout(
    MultiField(
        "Education",
        Formset('education'),
    ),

One slight modification I would recommend is to add an optional parameter to the Formset LayoutObject for `formset_helper`. That works the same way. That way you can pass in the custom helper as well. — Alejandro, Jul 10 '15 at 18:29
In which files are these codes put? Where do I place formset.html? And what is Formset('education'); where is it coming from? — Gourav Chawla, Feb 13 '17 at 12:36
for completeness: you need to add `from django.template import Context`, `from django.template.loader import render_to_string` above. — nerdoc, Sep 26 '22 at 21:53

score 9 · Answer 2 · edited Aug 03 '17 at 14:30

A slight modification to the earlier answer by qris.

This update (as suggested by Alejandro) will allow for our custom Formset Layout Object to use a FormHelper object to control how the formset's fields are rendered.

from crispy_forms.layout import LayoutObject

from django.template.loader import render_to_string


class Formset(LayoutObject):
    """ 
    Renders an entire formset, as though it were a Field.
    Accepts the names (as a string) of formset and helper as they
    are defined in the context

    Examples:
        Formset('contact_formset')
        Formset('contact_formset', 'contact_formset_helper')
    """

    template = "forms/formset.html"

    def __init__(self, formset_context_name, helper_context_name=None,
                 template=None, label=None):

        self.formset_context_name = formset_context_name
        self.helper_context_name = helper_context_name

        # crispy_forms/layout.py:302 requires us to have a fields property
        self.fields = []

        # Overrides class variable with an instance level variable
        if template:
            self.template = template

    def render(self, form, form_style, context, **kwargs):
        formset = context.get(self.formset_context_name)
        helper = context.get(self.helper_context_name)
        # closes form prematurely if this isn't explicitly stated
        if helper:
            helper.form_tag = False

        context.update({'formset': formset, 'helper': helper})
        return render_to_string(self.template, context.flatten())

Template (used to render formset):

{% load crispy_forms_tags %}

<div class="formset">
  {% if helper %}
    {% crispy formset helper %}
  {% else %}
    {{ formset|crispy }}
  {% endif %}
</div>

Now it can be used in any layout just like any other crispy forms layout object.

self.helper.layout = Layout(
    Div(
        Field('my_field'),
        Formset('my_formset'),
        Button('Add New', 'add-extra-formset-fields'),
    ),
)

# or with a helper
self.helper.layout = Layout(
    Div(
        Field('my_field'),
        Formset('my_formset', 'my_formset_helper'),
        Button('Add New', 'add-extra-formset-fields'),
    ),
)

Thank you for this! :) Where would you instanciate the `my_formset_helper`? I tried `self.my_formset_helper` (for the ModelForm's `__init__` as well as just `my_formset_helper` but nothing seems to stick. Cheers — nuts, Mar 22 '19 at 09:45
@nuts you can do it in the view's `get_context_data`. `my_formset_helper` should be a context variable and it should be the helper used for the formset. However, I found it cleaner to create a form with the helper for the formset and pass it to `inlineformset_factory(..., form=MyInlineModelForm)`, then have `{% crispy formset formset.form.helper %}` in the template. — vikki, May 06 '19 at 12:11

score 5 · Answer 3 · answered May 12 '13 at 12:49

This is currently not supported in crispy-forms. Your only option would be to use |as_crispy_field filter (not documented yet, sorry).

I have started development of this feature for {% crispy %} tag and in a feature branch, it's all explained here: https://github.com/maraujop/django-crispy-forms/issues/144

I'm looking for feedback, so if you are still interested, feel free to post.

score 0 · Answer 4 · answered Feb 21 '18 at 02:23

Basing on above solution Formset(LayoutObject), you would combine django-dynamic-formset & crispy. On my order page I have:

order's section part 1
order's inline formset with dynamic-add forms
order's section part N

Now it is simple and clear, ModelForms are:

class OrderTestForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
    super(OrderTestForm, self).__init__(*args, **kwargs)
    self.helper = FormHelper(self)
    self.helper.form_tag = True
    self.helper.html5_required = True
    self.helper.form_action = 'test_main'
    self.helper.layout = Layout(
        'product_norms', #section 1
        'reference_other', #section 1
        # rest of the section 1 fields
        Formset('samples', 'helper'), # inline dynamic forms
        'checkbox_is_required' # start of section N
        # other order sections fields
    )
    self.helper.add_input(Submit("submit", "Save order"))

Formset helper layout:

class SamplesFormSetHelper(FormHelper):
def __init__(self, *args, **kwargs):
    super(SamplesFormSetHelper, self).__init__(*args, **kwargs)
    self.form_method = 'post'
    self.html5_required = True
    self.layout = Layout(
        Fieldset('',
        'description',
        'product', # foreign key
        'DELETE', # delete django-dynamic-formset
        css_class="formset_row"), # add-rows 
    )
    self.form_tag = False
    self.render_required_fields = False

Add/delete inlines, saving order with formset operations work as expected.

django crispy forms: Nesting a formset within a form

4 Answers4

Linked