Feature: 希望动态表单支持无限嵌套写法

[LiYanTaogithub]

Description

希望动态表单支持无限嵌套写法

function Demo() {
    const config = {
        fields:[
            {
                name: 'test',
                field: {
                    type: 'input',
                    props: {
                        placeholder: '请输入',
                        style: {
                            width: 120,
                        },
                    },
                },
            },
            { 
                name: 'outer',
                label: '外层表单',
                isList: true,
                container: 'Card',
                field: {
                    type: 'dynamicdepfieldcomp',
                    props: {
                        fields: [
                            {
                                name: '嵌套表单',
                                label: 'inner',
                                isList: true,
                                container: 'Card',
                                field: {
                                    type: 'dynamicdepfieldcomp',
                                    props:{
                                        fields: [
                                            {
                                                name: 'test',
                                                label: 'test',
                                                field: 'input',
                                            },
                                        ],
                                    },
                                },
                            },
                            {
                                name: 'q',
                                rules: [{ required: true, message: 'type something' }],
                                field: {
                                    type: 'input',
                                    props: {
                                        placeholder: '请输入',
                                        style: {
                                            width: 120,
                                        },
                                    },
                                },
                            },
                            {
                                name: 'fruilt',
                                label: '水果',
                                field: {
                                    type: 'select',
                                    props: {
                                        placeholder: '请输入',
                                        style: {
                                            width: 120,
                                        },
                                    },
                                },
                                remoteSource: {
                                    init: false,
                                    url:
                      'https://run.mocky.io/v3/a435a830-a2b3-49ce-bc6b-40298ba57bcb',
                                    method: 'GET',
                                    converter: ({ data }) => {
                                        return data.map((item) => {
                                            return {
                                                text: item.text,
                                                value: item.value,
                                            };
                                        });
                                    },
                                },
                            },
                            {
                                name: 'goods',
                                label: '货物',
                                initialValue: 'oil',
                                initialSource: [
                                    {
                                        label: '石油',
                                        value: 'oil',
                                    },
                                    {
                                        label: '煤',
                                        value: 'coal',
                                    },
                                ],
                                field: {
                                    type: 'select',
                                    props: {
                                        placeholder: '请输入',
                                        style: {
                                            width: 120,
                                        },
                                    },
                                },
                            },
                        ],
                    },
                },
            },
            {
                label: ' ',
                colon: false,
                render: {
                    type: 'button',
                    props: {
                        htmlType: 'submit',
                        type: 'primary',
                        children: 'submit',
                    },
                },
            },
            {
                label: ' ',
                colon: false,
                render: {
                    type: 'button',
                    props: {
                        onClick: () => {
                            this.ref.current.validateFields().then((values) => {
                                console.log('表单值: ', values);
                            });
                        },
                        children: 'api提交',
                    },
                },
            },
        ],
    };
    return (
        <Form
            initialValues={{ radiogroup: 'peach' }}
            onFinish={(values) => {
                console.log('Success:', values);
            }}
            {...config}
        />
    );
}

Solution

[yulongcs]

正好需要这个场景，求大佬更新下