Django中如何使用ModelForm实现单次提交保存多个关联模型实例

你需要使用Django自带的ModelFormset组件来实现同个Meal下批量提交多个FoodItem的需求，具体实现步骤如下：

1. 构造批量表单集 #

保留你现有的FoodItemForm，使用formset_factory生成支持多实例提交的表单集合：

from django.forms import formset_factory
from .models import Meal, FoodItem

# 原有单FoodItem表单
class FoodItemForm(forms.ModelForm):
    class Meta:
        model = FoodItem
        fields = ('name',)

# 生成批量表单集：extra为默认显示的输入框数量，can_delete可选，开启后支持提交时删除指定项
FoodItemFormSet = formset_factory(
    FoodItemForm,
    extra=5,
    can_delete=False,
    max_num=20 # 可选，限制最多提交的菜品数量
)

# 如果需要同时提交Meal的日期、餐次信息，额外新增Meal的ModelForm
class MealForm(forms.ModelForm):
    class Meta:
        model = Meal
        fields = ('date', 'meal_time')

2. 视图逻辑处理 #

根据你的业务场景选择对应处理逻辑：

场景A：Meal已预先创建，仅批量添加关联FoodItem #

from django.shortcuts import get_object_or_404, redirect, render

def add_batch_food(request, meal_id):
    target_meal = get_object_or_404(Meal, id=meal_id)
    if request.method == "POST":
        formset = FoodItemFormSet(request.POST)
        if formset.is_valid():
            for form in formset:
                # 跳过用户未填写的空表单项
                if not form.cleaned_data:
                    continue
                # 先构造FoodItem实例不保存，赋值外键后再提交
                food_item = form.save(commit=False)
                food_item.meal = target_meal
                food_item.save()
            return redirect("meal_detail", meal_id=target_meal.id)
    else:
        formset = FoodItemFormSet()
    return render(request, "add_batch_food.html", {"formset": formset, "meal": target_meal})

场景B：单次提交同时创建Meal和所有关联FoodItem #

def create_meal_with_food(request):
    if request.method == "POST":
        meal_form = MealForm(request.POST)
        food_formset = FoodItemFormSet(request.POST)
        if meal_form.is_valid() and food_formset.is_valid():
            # 先保存Meal获取主键
            new_meal = meal_form.save()
            # 批量保存FoodItem
            for form in food_formset:
                if not form.cleaned_data:
                    continue
                food_item = form.save(commit=False)
                food_item.meal = new_meal
                food_item.save()
            return redirect("meal_list")
    else:
        meal_form = MealForm()
        food_formset = FoodItemFormSet()
    return render(request, "create_meal.html", {
        "meal_form": meal_form,
        "food_formset": food_formset
    })

3. 模板渲染 #

必须渲染formset的management_form字段，否则Django无法识别表单数量会抛出校验错误：

场景A对应模板add_batch_food.html #

<form method="post">
    {% csrf_token %}
    <!-- 必须保留的formset管理字段 -->
    {{ formset.management_form }}
    {% for form in formset %}
        <div class="food-input">
            <label>菜品名称{{ forloop.counter }}：</label>
            {{ form.name }}
            {% for error in form.name.errors %}
                <span style="color:red;">{{ error }}</span>
            {% endfor %}
        </div>
    {% endfor %}
    <button type="submit">保存所有菜品</button>
</form>

场景B对应模板create_meal.html #

<form method="post">
    {% csrf_token %}
    <!-- 渲染Meal信息字段 -->
    <div>
        <label>餐次日期：</label>
        {{ meal_form.date }}
    </div>
    <div>
        <label>用餐时段：</label>
        {{ meal_form.meal_time }}
    </div>
    <hr>
    <!-- 渲染FoodItem批量输入框 -->
    {{ food_formset.management_form }}
    {% for form in food_formset %}
        <div class="food-input">
            <label>菜品{{ forloop.counter }}：</label>
            {{ form.name }}
        </div>
    {% endfor %}
    <button type="submit">创建餐次及菜品</button>
</form>

可选优化 #

如果需要前端动态增减输入框，只需按照Django formset的命名规则（form-索引-name）用JS修改新生成输入框的name、id属性即可，后端逻辑不需要做任何调整。

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