Django中Formset无报错但无法保存：多表单添加后未存储

下面是你的代码中存在的几个关键问题，以及对应的修复方案：

一、视图层（views.py）问题修复 #

1. 用错了queryset模型：初始化formset时用了Example.objects.none()，但对应的模型是Club，必须改成Club.objects.none()，否则formset会关联错误的模型。
2. 未处理文件上传：logo是文件字段，POST请求时必须传入request.FILES，不然文件字段验证不通过，导致form.is_valid()返回False，但你没做错误提示所以看不到问题。
3. 手动填充created_by字段：如果created_by是关联用户的字段，前端没传这个值的话，得在保存时手动赋值给当前登录用户，不然会因字段缺失导致验证失败。

修改后的views.py代码：

def StepThreeView(request):
    formSet = modelformset_factory(Club, fields=("name", "channel", "logo", "created_by"))

    # 修正为Club模型的空查询集
    form = formSet(queryset=Club.objects.none())

    if request.method == "POST":
        # 必须传入request.FILES处理文件上传
        form = formSet(request.POST, request.FILES)

        if form.is_valid():
            # 先不提交到数据库，手动设置created_by
            instances = form.save(commit=False)
            for instance in instances:
                instance.created_by = request.user
                instance.save()

    context = {'form': form}
    return render(request, 'on_boarding/step_three.html', context)

二、HTML模板问题修复 #

1. 缺少表单容器：你的JS代码要找formCopyTarget元素，但模板里没有这个容器，得在<form>内部加一个，用来放动态添加的表单。
2. 没加文件上传的编码类型：表单必须加enctype="multipart/form-data"才能上传文件，否则logo字段的数据传不到后端。
3. 初始表单渲染：默认只放了empty_form模板，没有渲染实际的表单，用户第一次添加前没有可提交的表单，得把现有表单渲染出来。

修改后的HTML代码：

<form method="POST" id="form" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.management_form }}
    <!-- 新增表单容器，用来存放动态添加的表单 -->
    <div id="formCopyTarget" class="form-container">
        <!-- 渲染初始的表单 -->
        {% for f in form %}
            <div class="block">{{ f.as_p }}</div>
        {% endfor %}
    </div>
    <!-- 隐藏的空表单模板，用来克隆 -->
    <div class="hidden" id="form-copy">
        {{ form.empty_form.as_p }}
    </div>
</form>

<button class="add-club" type="button" onclick="AddUser()">
    Add Club
</button>

三、JavaScript代码问题修复 #

1. 没替换__prefix__为正确索引：之前的replace(regex)没指定替换值，必须把空表单里的__prefix__替换成当前的表单索引，不然formset识别不了这些字段。
2. 克隆后没移除隐藏类：克隆的模板是hidden的，添加到页面时要去掉这个类，不然表单看不见。
3. 表单数量计算要包含已有表单：初始时如果有表单，currentForms.length要统计已有的数量，避免索引重复。

修改后的JS代码：

function AddUser() {
    const formCopyTarget = document.getElementById("formCopyTarget");
    const copyForm = document.getElementById("form-copy").cloneNode(true);
    const totalNewForm = document.getElementById('id_form-TOTAL_FORMS');
    const currentForms = document.getElementsByClassName("block");

    // 统计当前已有的表单数量
    let totalForms = currentForms.length;
    
    // 移除隐藏类，设置正确的类和ID
    copyForm.classList.remove('hidden');
    copyForm.className = 'block';
    copyForm.id = `form-${totalForms}`;

    // 将__prefix__替换为当前的表单索引
    const regex = new RegExp('__prefix__', 'g');
    copyForm.innerHTML = copyForm.innerHTML.replace(regex, totalForms);

    // 更新总表单数量
    totalNewForm.value = totalForms + 1;

    // 把新表单添加到容器里
    formCopyTarget.appendChild(copyForm);
}

额外提示 #

如果还是保存失败，建议在模板里添加错误提示，这样能看到验证失败的原因：

<!-- 在表单容器后添加错误提示 -->
{% if form.non_form_errors %}
    <div style="color: red;">{{ form.non_form_errors }}</div>
{% endif %}
{% for f in form %}
    <div class="block">
        {{ f.as_p }}
        {% if f.errors %}
            <div style="color: red;">{{ f.errors }}</div>
        {% endif %}
    </div>
{% endfor %}

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