Form.io DataGrid中Radio等组件无法显示数据问题求助

问题描述 #

我用Form.io实现了包含textFields、textArea、radio、day等组件的datagrid，通过GET请求获取服务端数据后匹配字段填充单元格。目前能成功匹配所有数据，但radio、day和textField组件的数据无法动态显示，textArea或number组件则正常展示。将这些异常组件从datagrid中移出单独放置时，数据能正常渲染。

相关代码 #

填充datagrid的函数：

function fillDataGridWithResponseData(componentsConfig, data) {
    const dataGridComponent = componentsConfig.components;
    if (dataGridComponent) {
       // const dataGridRows = dataGridComponent.components || [];
        const responseRows = data.dataGrid[0];

        for (const key in responseRows) {
            if (responseRows.hasOwnProperty(key)) {
                const columnComponent = dataGridComponent.find(component => component.key === key);

                if (columnComponent) {
                    if (columnComponent.key === "gender") {
                        columnComponent.defaultValue = responseRows[key].toUpperCase();                            
                    } else {
                        columnComponent.defaultValue = responseRows[key];
                    }
                }
            }
        }
    }
}

Form构建调用代码：

Formio.builder(document.getElementById('builder'), componentsConfig)
    .then(function (form) {
        fillDataGridWithResponseData(componentsConfig, data);
        form.redraw();
        form.on('change', function (event) {
            formResult = event.data;
            updateSubmitButtonStatus();
        });
    })

问题原因 #

你错误地直接修改了组件配置的defaultValue，但Form.io的表单数据模型与组件配置是分离的：

• defaultValue仅在表单初始化时生效，表单实例创建后修改它不会同步到当前表单的运行时数据中
• Datagrid作为嵌套组件，其行数据需要挂载到表单实例的data属性中，而非修改组件配置项
• textArea/number能临时生效是因为这类组件的渲染逻辑对配置项变更有兼容性处理，但这不是标准用法

解决方案 #

正确的做法是直接构造datagrid对应的行数据结构，赋值给表单实例的data属性，表单会自动同步渲染：

修改数据填充逻辑 #

function fillDataGridWithResponseData(data) {
    // 构造符合datagrid要求的数据结构，假设你的datagrid的key是"dataGrid"
    return {
        dataGrid: [
            {
                ...data.dataGrid[0],
                // 单独处理gender的大写转换
                gender: data.dataGrid[0].gender?.toUpperCase()
            }
        ]
    };
}

更新Form构建代码 #

Formio.builder(document.getElementById('builder'), componentsConfig)
    .then(function (form) {
        // 生成符合要求的表单数据并赋值
        const formData = fillDataGridWithResponseData(data);
        form.data = formData;
        
        // 无需手动调用redraw，设置data后表单会自动触发重绘
        form.on('change', function (event) {
            formResult = event.data;
            updateSubmitButtonStatus();
        });
    })

补充说明 #

• 若后续需要动态更新datagrid行数据，直接修改form.data.dataGrid数组即可，表单会自动同步渲染
• 始终通过表单实例的data属性操作数据，不要直接修改组件配置项，这是Form.io数据驱动渲染的核心规则

内容的提问来源于stack exchange，提问作者Talenel