Skip to content
This repository was archived by the owner on Nov 4, 2026. It is now read-only.
This repository was archived by the owner on Nov 4, 2026. It is now read-only.

ModalForm 显式多 section 表单:每个 section 独立 <form>,提交时丢弃第 2+ 个 section 的值 #2153

Closed

Description

@baozhoutao

问题(存量缺陷,与 #2152 的修复无关但由其实测发现)

ModalForm 的显式 sections 布局(form view 提供 sections 时)为每个 section 渲染一个独立的 SchemaRenderer,即每个 section 一个独立的 react-hook-form 实例和 <form> 元素,并且它们共享同一个 formId(重复 DOM id)。

底部提交按钮通过 form={formId} 关联表单,浏览器语义下只会关联第一个匹配 id 的 form。后果:

  • 只有第一个 section 的字段值进入提交 payload,其余 section 的值静默丢失。
  • 实测证据(真实 console + hotcrm 后端):弹窗内 document.querySelectorAll('form') 返回 2 个 form、id 相同(_r_6u_),提交按钮 associatedForm 指向第 0 个;第二个 section 中已填的必填字段在 POST body 中缺失,后端返回 VALIDATION_FAILED: status (required)。
  • 波及范围:所有"多 section 的 form view + 弹窗创建/编辑"场景(例如 hotcrm lead 默认 form view 有 6 个 section;其快捷创建视图恰好只有 1 个 section,所以日常未暴露)。useActionModal 打开的表单同样走此路径。此外跨 section 的字段条件(visibleWhen 等)也因表单实例隔离而失效。

方案(建议)

与 DrawerForm / #2152 的 fieldGroups 回退一致:改为单个 form + 虚拟 section-divider 字段,所有 section 共享一个 react-hook-form 实例。需要处理:

  • 每个 section 的独立 columns(单一网格下需统一列数或用 colSpan 近似;或扩展基础 Form 支持分组容器);
  • 现有 Card 包裹的视觉样式(section-divider 是内联标题,不是卡片)——若要保留卡片外观需扩展基础 Form 渲染器;
  • contentLayout: 'tabbed' 分支(Tabs 内同样是每 section 一个 form,同样丢数据)。

待确认

  • 是否接受多 section 弹窗从"卡片"变为"内联分组标题"(与 DrawerForm、全页 ObjectForm 一致)?
  • 或者选择在基础 Form 渲染器支持共享外部 react-hook-form 实例(改动面更大,可保留现有视觉)?

Activity

  1. baozhoutao commented on Jul 2, 2026

    @baozhoutao
    ContributorAuthor

    补充实测证据(真实 console :5180 + hotcrm 后端 :4001):问题比"提交丢值"更严重——tabbed 布局下,切换 tab 直接丢用户输入,连提交都不用。

    hotcrm 联系人对象的默认 form view 是 type: 'tabbed' + 3 个 section(Identity / Contact Info / Preferences)。在新建联系人弹窗中:

    1. Identity tab 的 名(first_name)输入 测试名 → 界面正常显示;
    2. 切到 Contact Info tab → Identity 的 SchemaRenderer 被卸载(Radix Tabs 只挂载激活 tab,而每个 tab 是独立的 react-hook-form 实例,随组件一起销毁);
    3. 切回 Identity → first_name 变为空,输入无声丢失。

    复现输出:

    ["typed: tab=Identity val=测试名",
     "switched: tab=Contact Info emailInput=true",
     "back: tab=Identity val="]
    

    也就是说 tabbed 多 section 弹窗表单在当前线上版本里基本不可用:跨 tab 填写必丢数据(切换即丢 + 提交只收集第一个 form)。非 tabbed 的多 section 弹窗(纵向堆叠)则是本 issue 描述的"提交只带第一个 section 的值"。

    这进一步说明修复方向应优先"单 form + 共享表单实例"(切 tab 只隐藏不销毁值),而不仅是修提交按钮的 form 关联。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions