Django 如何在 Django 中创建动态表单集

在本文中，我们将介绍如何在 Django 中创建动态表单集。动态表单集是指根据用户的需求，在同一页面上动态添加或删除表单字段。这种功能在需要用户输入变量数量的数据时非常有用，比如添加多个联系人或多个选项。

什么是表单集？

在 Django 中，表单集是一组表单的集合，可以一次性地进行验证和提交。动态表单集是指使用 JavaScript 动态添加或删除表单字段。

创建动态表单集的步骤

下面是在 Django 中创建动态表单集的步骤：
1. 创建一个普通的 Django 表单，用于定义单个表单字段的验证规则和展示样式。例如，我们可以创建一个 ContactForm 表单来收集联系人的姓名和电子邮件地址。

from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(label='姓名')
    email = forms.EmailField(label='电子邮件地址')

创建一个表单集的基类，继承自 Django 的 BaseFormSet 类。在表单集基类中，我们可以添加一个额外的表单字段用于动态添加或删除表单。下面是一个示例：

from django.forms import formset_factory, BaseFormSet

class BaseContactFormSet(BaseFormSet):
    extra = forms.IntegerField(initial=0, widget=forms.HiddenInput)

在视图函数中实例化表单集，并将其传递给模板进行渲染。下面是一个示例：

from django.shortcuts import render
from .forms import ContactForm, BaseContactFormSet

def contact_view(request):
    ContactFormSet = formset_factory(ContactForm, formset=BaseContactFormSet, extra=1)

    if request.method == 'POST':
        formset = ContactFormSet(request.POST)
        if formset.is_valid():
            # 处理表单提交的逻辑
            pass
    else:
        formset = ContactFormSet()

    return render(request, 'contact.html', {'formset': formset})

在模板中渲染表单集。通过遍历表单集中的表单，我们可以动态生成表单字段。下面是一个示例：

<form method="post">
    {% csrf_token %}
    {% for form in formset %}
        {{ form }}
    {% endfor %}
    <button type="submit">提交</button>
</form>

使用 JavaScript 动态添加或删除表单字段。为动态添加或删除表单字段的按钮添加事件监听器，并使用 JavaScript 操作表单集中的表单字段。

<script>
document.addEventListener('DOMContentLoaded', function() {
    let formset = document.getElementById('formset');
    let addButton = document.getElementById('addButton');
    let removeButton = document.getElementById('removeButton');

    addButton.addEventListener('click', function() {
        let form = document.createElement('div');
        form.innerHTML = '{{ formset.empty_form }}';
        formset.appendChild(form.firstChild);
    });

    removeButton.addEventListener('click', function() {
        let forms = formset.getElementsByClassName('form-row');
        if (forms.length > 1) {
            forms[forms.length - 1].remove();
        }
    });
});
</script>

通过以上步骤，我们可以在 Django 中动态创建表单集，并根据用户的需求动态添加或删除表单字段。