crispy-forms, layouts, and htmx

Using Django Forms & APIs
1

I have come at this problem a few different times and have worked around it a few different ways, none of them feeling like the correct way.

The Problem:
I want to render a single crispy-forms field for use with htmx. The form containing the field uses a helper with a layout. The field in the layout has the hx- parameters defined on it. The form and field render correctly upon load. I am trying to perform field validation on each field as the user makes changes. The form data is sent to a view by htmx upon any change. The form is instantiated using the request.POST data and is_valid is called. I then return only the one field being checked to the browser for htmx to replace on the form. I am using the as_crispy_field tag to render the single field. Everything works with the one exception that the hx- attributes defined on the helper are not included in the rendered field.

The view code:

def validate(request):
    form = CTSaturationForm(request.POST)
    form.is_valid()
    field = form[request.htmx.trigger_name]
    field.form.helper = CTSaturationFormHelper()
    return HttpResponse(as_crispy_field(field))

The final question:
Does anyone know how to render a single field from a crispy-form making use of the layout defined on the containing form’s helper?

Other attempts:
I solved this in a previous attempt, in a different part of my project, by modifying the attributes on the field’s widget before calling as_crispy_field. I would prefer to not have to do this manually for every field because it is already defined in the helper’s layout.

Thanks in advance.

2

<conjecture>
From my (admittedly cursory) review of the docs and code, the use of as_crispy_field in this manner is covered by the same paragraph in the docs as the crispy filter. i.e.:

As handy as the |crispy filter is, think of it as the built-in methods: as_table , as_ul and as_p . You cannot tune up the output. The best way to make your forms crisp is using the {% crispy %} tag with forms.

and

django-crispy-forms implements a class called FormHelper that defines the form rendering behavior. Helpers give you a way to control form attributes and its layout, doing this in a programmatic way using Python.

The implication that I draw from this is that the helpers do not apply when you use the “filter-style” methods.

(This all is based on a combination of some empirical evidence and my reading of the docs, not from any direct knowledge.)
</conjecture>

If I had this situation where I had different individual fields needing to be rendered, and depending upon the exact specifics involved, I’d be tempted to try one of the following:

  • Dynamically create the Layout object as needed.
  • Render the entire form and then use something like BeautifulSoup to extract the portion of the rendered template to be returned.

You might also want to see the thread at Adding template fragments or partials for the DTL for some other ideas.

3

Thanks @KenWhitesell, I have come to the same conclusion. I am following the conversation you linked and I just started using django-template-partials in my project. I can’t wait to see that continue to grow.

For now, I was able to solve the problem by manually applying the attrs defined in the layout to the widget when rendering the form field.

This view gets called via htmx when any of the form fields change. It uses the trigger_name provided by django-htmx to get the form field. It then looks up the field’s location in the form helper, and merges the widget’s existing attributes with the ones from the layout. The field is then rendered using as_crispy_field, which is then returned to htmx. htmx then replaces the field in the form.

For completeness and documentation, here is my code.

def validate(request):
    form = CTSaturationForm(request.POST)
    form.is_valid()
    field = form[request.htmx.trigger_name]
    field.form.helper = CTSaturationFormHelper()
    field_pointer = next(
        (
            pointer
            for pointer in field.form.helper.layout.get_field_names()
            if pointer.name == request.htmx.trigger_name
        )
    )
    layout_object = get_layout_child(field.form.helper.layout, field_pointer.positions)
    field.field.widget.attrs.update(layout_object.attrs)
    return HttpResponse(as_crispy_field(field))

An example of one of the field definitions in the helper layout is shown here.

Field(
    "i_slg_ext_max",
    hx_target="#div_id_i_slg_ext_max",
    hx_post=reverse("ct-saturation-validate"),
    hx_trigger="change",
    hx_swap="outerHTML",
    hx_ext="event-header",
),