A set of AngularJS directives to easily manage Django Formsets into front-end.
Add the djangoFormsets
module to your Angular application:
angular.module('myApp', ['djangoFormsets']);
Given you have a template with local variable formset
that is an instance of BaseFormSet
(usualy created by the factory formset_factory
):
<form method="post">{% csrf_token %}
<div django-formset="template.html">
{{formset.management_form}}
<div django-formset-container>
{% for form in formset %}
<div django-formset-child>
{{form.as_p}}
<button django-formset-remove>Remove</button>
</div>
{% endfor %}
</div>
<button django-formset-add>Add</button>
</div>
<button type="submit">Submit</button>
</form>
<!-- template.html -->
{% with form=formset.empty_form %}
<script type="text/ng-template" id="template.html">
<div django-formset-child>
{{form.as_p}}
<button django-formset-remove>Remove</button>
</div>
</script>
{% endwith %}
django-formset="{template}.html"
django-formset-child
django-formset-add
django-formset-remove
# Modifiers
django-formset-prefix
django-formset-can-delete
django-formset-can-order
Given the django formset:
from django import forms
from django.shortcuts import render, redirect
from django.forms.formsets import formset_factory
class SimpleForm(forms.Form):
name = forms.CharField()
email = forms.EmailField()
SimpleFormSet = formset_factory(SimpleForm, extra=2, can_delete=True)
def main(request):
formset = SimpleFormSet(request.POST or None, prefix="foo")
if form.is_valid() and formset.is_valid():
return redirect('/')
return render(request, 'template.html', {'formset': formset})