Django自定义表单中添加关联功能的实现步骤咨询

1. 表单结构搭建 #

• 核心元素包含三个部分：
  • 注册商选择组件：用下拉框或带搜索的选择器，选项绑定已存在的注册商数据，值为注册商ID，显示文本为注册商名称
  • 新增注册商入口：按钮+内嵌/弹窗表单，表单包含注册商名称等必填项，默认隐藏
  • 注册商ID字段：设为隐藏输入框（或只读输入框），用于存储最终要提交的ID值

2. 前端交互逻辑开发 #

• 选择已有注册商：选中选项后，自动将对应ID赋值到注册商ID字段
• 新增注册商流程：
  1. 点击「新增注册商」按钮，显示新增表单
  2. 用户填写完成后提交新增请求
  3. 后端返回新注册商ID后，自动将ID填入注册商ID字段，同时把新注册商添加到选择组件的选项列表中，隐藏新增表单
• 交互细节：新增过程中添加加载状态，避免重复提交

3. 后端接口支持 #

• 注册商列表接口：返回已存在的注册商数据，格式示例：

  [{"id": 101, "name": "阿里云"}, {"id": 102, "name": "腾讯云"}]
  

• 新增注册商接口：接收注册商名称等参数，返回新生成的注册商ID，格式示例：

  {"code": 200, "data": {"id": 103}, "msg": "新增成功"}
  

• 接口需包含权限校验，防止非法操作

4. 数据校验与异常处理 #

• 前端校验：提交表单前检查注册商ID字段是否有值；新增注册商时检查名称是否为空
• 后端校验：接收表单数据时，验证注册商ID是否在数据库中存在，拒绝无效ID
• 异常处理：新增失败时提示用户具体错误；列表加载失败时显示重试按钮或提示文案

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