Django开发中如何手动编写原生input标签替代Django默认表单渲染使用inlineformset

两个异常的本质原因非常明确：

• 类型匹配报错：直接把前端传来的商品名字符串赋值给ItemsInvoice.item外键字段，Django外键字段仅接收对应模型实例或实例主键值，传自然字符串必然触发类型错误。
• 提交后无数据持久化：手动编写的原生input完全不符合Django inlineformset的字段命名规范，表单集无法从POST请求中解析到对应字段值，校验全量不通过，自然不会触发模型写入流程。

要完全手写原生input不使用Django默认渲染，必须严格遵守Django Formset的字段命名约定，否则表单集完全无法识别提交的数据：

• 字段名必须以表单集的固定前缀开头（可通过模板变量{{ items.prefix }}获取，无需手动硬编码）
• 每个明细行的字段名必须带对应的行索引（从0开始，第一行索引为0、第二行索引为1）
• 固定格式为：<表单集前缀>-<行索引>-<字段名>，例如前缀为itemsinvoice_set时，第一行的商品字段对应name为itemsinvoice_set-0-item
• 必须在模板中保留{{ items.management_form }}，该模板变量会输出隐藏的元信息字段（总表单数、最小/最大允许表单数等），缺失会直接导致表单集校验失败。

1. 视图层重构 #

彻底去掉手动从POST取值、手动创建模型实例的逻辑，严格遵循inlineformset的标准提交校验流程：

from django.contrib.auth.decorators import login_required
from django.db import transaction
from django.shortcuts import redirect, render
from .forms import CustomerInvoiceForm, CustomerInvoiceInlineFormset
from .models import Item, Invoice

@login_required
def create_client_invoice_view(request):
    # 初始化主表（订单）表单，POST请求时自动绑定提交数据
    invoice_form = CustomerInvoiceForm(request.POST or None)
    # 初始化明细表单集，新建场景下先绑定当前登录用户作为订单归属卖家，不提前写入数据库
    item_formset = CustomerInvoiceInlineFormset(
        request.POST or None,
        instance=Invoice(seller=request.user)
    )

    if request.method == "POST":
        # 主表单、表单集双校验通过后，通过事务原子性保存数据
        if invoice_form.is_valid() and item_formset.is_valid():
            with transaction.atomic():
                # 先保存主表，生成主表主键
                saved_invoice = invoice_form.save()
                # 把表单集关联到已保存的主表实例，批量保存所有明细
                item_formset.instance = saved_invoice
                item_formset.save()
                return redirect(...) # 替换为原有跳转逻辑

    context = {
        "invoice_form": invoice_form,
        "items": item_formset,
        "item_names": Item.objects.all()
    }
    return render(request, "invoiceapp/create_invoice.html", context)

说明：之前提交无数据的核心原因，是初始化表单集时没有正确绑定instance，也没有等主表保存完成后再保存明细，导致表单集找不到关联的父对象，校验通过后也无法执行写入。

2. 模板层适配（纯原生input实现） #

完全移除硬编码的无规则input，通过Django模板变量自动生成符合规范的字段名，同时保留自定义CSS类和JS交互逻辑：

<form method="POST">{% csrf_token %}
    <!-- 保留表单集元信息字段，不可删除 -->
    {{ items.management_form }}

    <!-- 主表客户名称输入框 -->
    <div class="p-1 pr-2 pb-1 text-xs border border-black rounded-lg flex flex-wrap">
        <div class="flex w-8/12 lg:w-9/12">
            <div class="w-10/12 ml-8 border-b border-gray-600 border-dotted">
                <input 
                    type="text" 
                    name="{{ invoice_form.customer.name }}"
                    value="{{ invoice_form.customer.value|default:'' }}"
                    class="bg-transparent w-full text-right focus:outline-none"
                >
            </div>
            <div>: name</div>
        </div>
    </div>

    <!-- 订单明细表格 -->
    <div class="mt-1 border border-black">
        <div class="flex flex-wrap grayBG text-sm text-white">
            <div class="w-16 md:w-1/12 border-r text-center">price</div>
            <div class="w-16 md:w-2/12 border-r text-center">quantity</div>
            <div class="w-20 md:w-2/12 border-r text-center">items</div>
        </div>

        <div id="allInp">
            <!-- 遍历表单集中的每一行明细表单 -->
            {% for form in items.forms %}
            <div class="flex flex-wrap grayBG text-sm text-black inp">
                <!-- 单价输入框 -->
                <div class="w-16 md:w-1/12 p-2 border-r text-center">
                    <input 
                        type="number" 
                        name="{{ form.price.name }}"
                        value="{{ form.price.value|default:'' }}"
                        onkeyup="totalSum()"
                        class="rounded-lg nrx focus:outline-none py-1 w-full"
                    >
                    {{ form.price.errors }}
                </div>
                <!-- 数量输入框 -->
                <div class="w-16 md:w-2/12 p-2 border-r text-center">
                    <input 
                        type="number" 
                        name="{{ form.quantity.name }}"
                        value="{{ form.quantity.value|default:'' }}"
                        onkeyup="totalSum()"
                        class="rounded-lg focus:outline-none py-1 w-full"
                    >
                    {{ form.quantity.errors }}
                </div>
                <!-- 商品选择输入框 -->
                <div class="w-20 md:w-2/12 p-2 border-r text-center">
                    <datalist id="types">
                        {% for i in item_names %}
                        <option value="{{ i.id }}">{{ i }}</option>
                    {% endfor %}
                    </datalist>
                    <input 
                        type="text" 
                        name="{{ form.item.name }}"
                        value="{{ form.item.value|default:'' }}"
                        list="types"
                        class="w-full rounded-lg focus:outline-none py-1"
                    >
                    {{ form.item.errors }}
                </div>
                <!-- 明细删除标记隐藏字段，JS删行时自动置为选中状态 -->
                {{ form.DELETE }}
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="w-6/12 text-center mt-1 mx-auto mb-6">
        <button class="w-full bg-white text-gray-900" id="submit">submit</button>
    </div>
</form>

<script>
$(function(){
    $('#allInp').formset({
        prefix: '{{ items.prefix }}',
        addText: 'add new row',
        addCssClass: 'btn btn-info',
        deleteText: 'delete',
        deleteCssClass: 'delFun',
        // 让JS新增的行自动匹配原有行的样式类
        formCssClass: 'inp'
    })
})
</script>

关键修正点：

• 所有input的name属性不再硬编码，通过{{ form.xxx.name }}自动生成，100%匹配Django表单集的命名规则，避免拼写错误。
• 商品datalist的option值从原来的商品名称改为商品主键id，ModelChoiceField仅通过主键识别关联对象，这样用户选择时看到的是商品名称，提交给后端的是对应id，Django会自动转换为Item实例，彻底解决外键类型不匹配的报错。
• 保留每行的{{ form.DELETE }}隐藏字段，配合JS插件实现明细行删除功能。

• 不要绕开表单校验逻辑手动从POST中拆字段创建模型，这种方式会丢失所有Django内置的字段类型校验、权限校验、业务规则校验能力，后续扩展维护成本极高。
• 注意模型名称的一致性：代码中出现的CustomerInvoice、InvoiceItem和模型定义的Invoice、ItemsInvoice不匹配，需要确保导入的模型类和实际定义完全一致。
• 之前视图中出现的obj.is_valid未加括号调用、save(commit=False)逻辑位置错误的语法问题，会直接打断视图执行，需要按照标准的formset保存流程调整。

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