formData

Drip Form 通过 formData prop 传递表单初始化数据。

formData 含义

• 表单的初始数据
• 后端接口下发的表单数据

formData 结构

formData 结构取决于 unitedSchema 的结构，整体是个对象结构，key 值为每个表单项的 fieldKey，当遇到对象容器或者数组容器时，需要调整为相应的结构。

代码示例

• App.tsx
• unitedSchema.ts

import DripForm from '@jdfed/drip-form'
import antd from '@jdfed/drip-form-theme-antd'
import unitedSchema from './unitedSchema'
import '@jdfed/drip-form/dist/index.css'
import '@jdfed/drip-form-theme-antd/dist/index.css'
import 'antd/dist/antd.css'

function App() {
    return (
        <DripForm
            // 表单配置文件
            unitedSchema={unitedSchema}
            // 导入组件
            uiComponents={{ antd }}
            // 设置表单值
            formData={{
                text_mJJFo: '输入框内容',
                colorPicker_oHFL5K: '#08ce96',
                array_4LrpU6: [
                    {
                        switch_mDJ7Lz: true,
                        '0': 1,
                    },
                ],
                object_lcALiU: {
                    null_VsLlWt: '这是一个文本',
                },
            }}
        ></DripForm>
    )
}

export default App

代码沙盒：

自动删除表单中不存在的冗余字段

警告

Drip form 默认不会删除 formData 传递的多余字段¹。可以配置ajvOptions removeAdditional 属性来让 Drip form 自动删除多余字段

代码示例

• App.tsx
• unitedSchema.ts

/**
 * 点击保存后，会自动删除冗余字段 aa
 */

import { useState } from 'react'
import DripForm from '@jdfed/drip-form'
import antd from '@jdfed/drip-form-theme-antd'
import unitedSchema from './unitedSchema'
import { Map } from '@jdfed/utils'
import '@jdfed/drip-form/dist/index.css'
import '@jdfed/drip-form-theme-antd/dist/index.css'
import 'antd/dist/antd.css'

const initFormData: Map = {
    checkbox: '1',
    colorPicker: '#000000',
    text: '1111',
    number: 1,
    //冗余字段，未在unnitedSchema中配置
    aa: 1,
}

function App() {
    const [data, setData] = useState<Map>()
    return (
        <>
            <DripForm
                // 表单配置文件
                unitedSchema={unitedSchema}
                // 导入组件
                uiComponents={{ antd }}
                // 设置表单值
                formData={initFormData}
                // 自定义ajv options配置
                ajvOptions={{
                    //删除所有冗余字段
                    removeAdditional: 'all',
                }}
                onSubmit={({ formData }) => {
                    setData(formData)
                }}
            ></DripForm>
            初始数据：
            <p>{JSON.stringify(initFormData)}</p>
            点击保存后删除冗余字段的数据：
            <p>{JSON.stringify(data)}</p>
        </>
    )
}

export default App

代码沙盒：

更多 ajvOptions 配置查看ajvOptions prop章节。

处理初始化数据

存在某些场景，需要对后端接口数据进行改造再传入表单的情况。

比如：表单数据由接口直接下发，但是下发的数据不能直接填入表单。 例如：级联选择器，后台下发的格式为 1-1-1，实际上表单渲染需要的是[1, 1, 1]。

可以通过 parse prop处理初始数据

---

1. 多余字段是指没有在 unitedSchema中定义，不属于表单本身的冗余字段。↩