Skip to main content

Django Formsets with ECMAScript 6.

Project description


Django Formsets with ECMAScript 6

Python tests Upload Python Package


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.

    # ...

How to use



In template

{% load static %}
  <link rel="stylesheet" href="{% static 'easy_formset/easy_formset.css' %}">
  <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>

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

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

Run project test

python runserver

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-easy-formset-0.2.4.tar.gz (5.2 kB view hashes)

Uploaded source

Built Distribution

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page