一个关于 Ant Design 复杂表单设计的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 912 days ago, the information mentioned may be changed or developed.

简单来说，现在的困惑是，我是通过 onValuesChange 方式获取表单数据的，其一是不知道表单校验该怎么做，其二是因为存在通过 setFieldValue 自动填入的联动数据，所以会存在不触发 onValuesChange 导致漏掉数据的情况。

具体的情况是这样。

项目里有这么一个页面，存在两级的 Tab 页，其中第一级的 Tab 数量在进入页面时固定，第二级由用户控制添加，然后每个 Tab 页下是一个独立的表单页。最后用户输入完成过后，提交一整个 JSON 到接口。最后的 JSON 大概长这样：

{
  "name": "xxx",
  "tab1": [
    {
      "foo": 111,
      "bar": 222
    },
    {
      "foo": 111,
      "bar": 222
    }
  ],
  "tab2": [
    {
      "fff": 333,
      "vvv": 444
    },
    {
      "fff": 555,
      "vvv": 666
    }
  ]
}

我的做法是在最外层定义了一个 Context ，同时每一种 Tab 各自准备了一个 From 组件。然后绑定 From 的 onValuesChange 事件，一旦触发就用 values 的值更新 Context 。如果用户切换 Tab 的话还是原来的组件，但是从 Context 取值然后再用 setFieldsValue 给 From 赋值，这样用户看上去就是切换页面了。本身页面还涉及到多处跨 Tab 的联动（比如在 tab2 下面修改了第一个子 tab 的 fff 字段的值，tab1 下面的 foo 字段会相应变动），差不多用这种方式也能解决数据联动的问题。

大部分逻辑算是走通了，但是还是遇到了两个问题。使用 onValuesChange 相当于脱离了 From 的控制，导致正常表单的数据校验没法触发。因为页面上不存在一个单页面提交按钮，所以也不知道什么时机来用代码触发校验；二是同页面联动数据的值是通过 setFieldValue 来做的，但是没想到的是 setFieldValue 不会触发 onValuesChange 事件，导致我不能把更新的值更新到 Context 上，除非用户再正常触发一次 onValuesChange ，但这样做显然不可能。

很头痛，是不是最初的设计就哪里有点问题？感觉有些不知所措了

tab

context

触发

页面

5 replies • 2023-12-02 20:20:14 +08:00