如何在formBuilder中自定义单选按钮组和复选框组的空值选项

formBuilder是一个强大的表单构建工具，它允许开发者通过简单的配置创建复杂的表单结构。在实际应用中，我们经常需要自定义表单字段的选项值，特别是对于单选按钮组(radio-group)和复选框组(checkbox-group)这类需要预设选项的字段类型。

问题背景

默认情况下，formBuilder为单选按钮组和复选框组生成的选项会自动包含类似"option-1"、"option-2"这样的默认值。但在某些场景下，我们可能需要这些选项的值为空，以便后续动态填充或保持灵活性。

解决方案分析

方法一：使用onAddField回调

通过监听onAddField事件，可以在字段被添加到表单时动态修改其选项：

onAddField: function(fieldId, field) {
    const configureFieldOptions = (field, options) => {
        field.values = options;
    };

    const radioGroupOptions = [
        {label: '选项1', value: ''},
        {label: '选项2', value: ''},
        {label: '选项3', value: ''}
    ];

    const checkboxGroupOptions = [
        {label: '选项1', value: ''},
    ];

    if (field.type === 'radio-group') {
        configureFieldOptions(field, radioGroupOptions);
    } else if (field.type === 'checkbox-group') {
        configureFieldOptions(field, checkboxGroupOptions);
    }
}

这种方法直接修改字段的values属性，简单有效，能够确保新添加的字段立即应用自定义选项。

方法二：使用typeUserAttrs配置

formBuilder提供了typeUserAttrs配置项，允许开发者自定义字段类型的属性：

typeUserAttrs: {
    'radio-group': {
        options: {
            label: '选项',
            type: 'options',
            values: [
                {label: '新选项1', value: ''},
                {label: '新选项2', value: ''},
                {label: '新选项3', value: ''}
            ],
        }
    }
}

需要注意的是，这里使用的是options而非values作为键名。这种方法更为声明式，适合在初始化时配置。

技术要点

1. 字段选项结构：formBuilder中的选项采用{label: '', value: ''}的对象数组形式，label显示给用户，value是实际提交的值。

2. 空值处理：将value设置为空字符串('')可以创建没有预设值的选项，这在需要动态填充或后端处理的场景中特别有用。

3. 字段类型区分：radio-group和checkbox-group虽然都是选择型字段，但它们的交互方式不同，通常复选框组只需要一个默认选项。

最佳实践建议

1. 对于简单的空值需求，推荐使用onAddField回调方法，它更直观且易于维护。

2. 如果需要更复杂的自定义选项或与其他配置配合使用，可以考虑typeUserAttrs方法。

3. 在实际项目中，可以将选项配置提取为常量或从API获取，提高代码的可维护性。

4. 考虑添加输入验证，确保即使用户选择了空值选项，表单也能正确处理。

通过以上方法，开发者可以灵活控制formBuilder生成的单选按钮组和复选框组的选项值，满足各种业务场景的需求。