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

[richards64]

简单来说，现在的困惑是，我是通过 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 ，但这样做显然不可能。

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

[tudou527]

设置 forceRender=true 然后把 2 个 tab 包到一个 <Form /> 中当做一个表单来处理，剩下该怎么校验怎么校验。

[duan602728596]

antd 不是提供了自定义表单控件的方法么？
https://ant.design/components/form-cn#components-form-demo-customized-form-controls

[DICK23]

手动触发校验不行吗？通过调用 formInstance.validateFields()

[zhimayan]

放在一个 Form 里，把用到的组件都封装成 Form 能监听到的格式（默认传 value onChange 这种

[StateMa]

约书亚哎 （