Skip to content

CleitonDeLima/django-easy-formset

Repository files navigation

django-easy-formset

Django Formsets with ECMAScript 6

Python tests Upload Python Package

Installation

Installation is easy using pip and the only requirement is a recent version of Django.

python -m pip install django-easy-formset

Basic app configuration

Then to add the Django Easy Formset to your project add the app easy_formset to your INSTALLED_APPS.

INSTALLED_APPS = [
    # ...
    "easy_formset",
]

How to use

Video

Video

In template

{% load static %}
<head>
  <link rel="stylesheet" href="{% static 'easy_formset/easy_formset.css' %}">
</head>
<body>
  <div id="{{ formset.prefix }}">
    {{ formset.management_form }}

    <template formset-empty-form="{{ formset.prefix }}">
      {{ formset.empty_form.as_p }}
      <a formset-form-delete="{{ formset.empty_form.prefix }}>Delete</a>
    </template>

    <div formset-forms="{{ formset.prefix }}">
      {% for form in formset.forms %}
        <div formset-form>
          {{ form.as_p }}
          <a formset-form-delete="{{ form.prefix }}>Delete</a>
        </div>
      {% endfor %}
    </div>
    <button formset-add="{{ formset.prefix }}">Add Formset</button>
  </div>
  ...
  <script src="{% static 'easy_formset/easy_formset.js' %}"></script>
  <script>
    const formset = new Formset("{{ formset.prefix }}")
  </script>
</body>

Custom undo element

// add one root element...
Formset.revertHTML = '<a href="#">Custom undo link...</a>'

const formset = new Formset("{{ formset.prefix }}")

Handle add/deleted events

document.addEventListener('formset:add', (event) => {
  // access the form with event.detail.form
})

document.addEventListener('formset:deleted', (event) => {
  // access the form with event.detail.form
})

Nested formsets

See examples in tests.testapp.

Run tests

python -m pip -r requirements.txt
pytest

Run project test

python manage.py runserver