如何在Django表单中实现单个特定字段的动态新增功能？

整个方案不需要用到formset，仅针对requirements字段做单独的动态扩展处理，分为表单定义、前端交互、后端处理三个部分：

1. Django表单定义 #

原有表单的其余10+字段照常定义，仅需要把requirements字段设为隐藏字段，用于接收前端拼接后的最终值：

from django import forms
from .models import YourBusinessModel

class BusinessForm(forms.ModelForm):
    # 其余10+业务字段照常定义，此处省略
    # requirements设置为隐藏字段，不直接对用户展示
    requirements = forms.CharField(
        widget=forms.HiddenInput(),
        required=False
    )

    class Meta:
        model = YourBusinessModel
        # 按实际需求列全所有字段即可
        fields = ["field1", "field2", "...", "requirements"]

    # 可选：添加requirements格式校验逻辑
    def clean_requirements(self):
        req_val = self.cleaned_data.get("requirements")
        if req_val and not req_val.startswith("requirements = {"):
            raise forms.ValidationError("需求字段格式异常")
        return req_val

2. 前端模板与动态交互 #

正常渲染其余表单字段，单独实现requirements字段的动态输入区域，通过JS实现新增输入框、提交前拼接值的逻辑：

<form id="businessForm" method="post">
    {% csrf_token %}
    <!-- 渲染除requirements外的其余字段 -->
    {% for field in form %}
        {% if field.name != "requirements" %}
        <div class="form-item">
            {{ field.label_tag }}
            {{ field }}
            {{ field.errors }}
        </div>
        {% endif %}
    {% endfor %}

    <!-- 动态需求输入区域 -->
    <div class="form-item">
        <label>需求列表</label>
        <div id="reqInputContainer">
            <!-- 默认展示第一个输入框 -->
            <input type="text" class="req-item" placeholder="请输入需求">
        </div>
        <button type="button" id="addReqBtn">新增需求</button>
    </div>

    <!-- 渲染隐藏的requirements字段 -->
    {{ form.requirements }}
    <button type="submit">提交表单</button>
</form>

<script>
// 新增需求输入框逻辑
document.querySelector("#addReqBtn").addEventListener("click", () => {
    const container = document.querySelector("#reqInputContainer");
    const newInput = document.createElement("input");
    newInput.type = "text";
    newInput.className = "req-item";
    newInput.placeholder = "请输入需求";
    container.appendChild(newInput);
})

// 表单提交前拼接需求值
document.querySelector("#businessForm").addEventListener("submit", (e) => {
    const reqItems = document.querySelectorAll(".req-item");
    const validVals = [];
    reqItems.forEach(item => {
        const val = item.value.trim();
        if(val) {
            // 处理值里的单引号避免格式错误
            validVals.push(`'${val.replace(/'/g, "\\'")}'`);
        }
    })
    // 按要求的格式赋值给隐藏的requirements字段
    if(validVals.length) {
        document.querySelector("#id_requirements").value = `requirements = {${validVals.join(",")}}`;
    } else {
        document.querySelector("#id_requirements").value = "";
    }
})
</script>

3. 后端视图处理 #

视图不需要额外修改，按常规Django表单处理逻辑即可：

from django.shortcuts import render, redirect
from .forms import BusinessForm

def form_handle_view(request):
    if request.method == "POST":
        form = BusinessForm(request.POST)
        if form.is_valid():
            # requirements字段已经是符合要求的格式，直接保存即可
            form.save()
            return redirect("submit_success_page")
    else:
        form = BusinessForm()
    return render(request, "你的模板路径.html", {"form": form})

可选优化点 #

• 可以给每个动态生成的输入框加删除按钮，点击后移除对应输入框即可
• 编辑场景下，页面加载时可以把已存储的requirements值解析拆分，生成对应数量的输入框自动填充，方便用户修改
• 可以添加输入框非空校验，避免空值提交

内容的提问来源于stack exchange，提问作者sixovov947