V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
richards64
V2EX  ›  前端开发

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

  •  
  •   richards64 · 2023-11-08 00:05:47 +08:00 · 1091 次点击
    这是一个创建于 380 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    5 条回复    2023-12-02 20:20:14 +08:00
    tudou527
        1
    tudou527  
       2023-11-08 00:39:01 +08:00
    设置 forceRender=true 然后把 2 个 tab 包到一个 <Form /> 中当做一个表单来处理,剩下该怎么校验怎么校验。
    duan602728596
        2
    duan602728596  
       2023-11-09 11:55:05 +08:00
    antd 不是提供了自定义表单控件的方法么?
    https://ant.design/components/form-cn#components-form-demo-customized-form-controls
    DICK23
        3
    DICK23  
       2023-11-14 13:51:26 +08:00
    手动触发校验不行吗?通过调用 formInstance.validateFields()
    zhimayan
        4
    zhimayan  
       364 天前
    放在一个 Form 里,把用到的组件都封装成 Form 能监听到的格式(默认传 value onChange 这种
    StateMa
        5
    StateMa  
       355 天前
    约书亚哎 (
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   987 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 20:23 · PVG 04:23 · LAX 12:23 · JFK 15:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.