SurveyJS 复合问题中自定义输入掩码的设置与优化

背景介绍

在使用 SurveyJS 库创建复合类型问题时，开发者可能会遇到输入掩码(Mask)设置失效的情况。特别是在处理日期时间(DateTime)类型的自定义掩码时，当关闭属性网格或在预览中选择布尔类型问题时，掩码设置会意外消失。

问题分析

这种问题的根本原因在于掩码对象的管理方式。当我们在复合问题中直接共享同一个掩码对象时，SurveyJS 无法正确区分不同掩码类型的设置，导致在特定操作后掩码配置丢失。

解决方案

独立掩码对象管理

正确的做法是为每种掩码类型创建独立的掩码对象。通过实现 onSetValue 和 onGetValue 回调函数，我们可以确保每种掩码类型都有自己独立的配置。

实现代码示例

// 获取复合问题中的输入组件
function getCompositeInput(question) {
  return question.contentPanel.getQuestionByName("q1");
}

// 在初始化时注册自定义属性
onInit() {
  Serializer.addProperties("myComposite", [
    {
      name: "maskType",
      category: "mask",
      default: "none",
      visibleIndex: 0,
      choices: ["none", "pattern", "datetime", "numeric", "currency"],
      onSetValue: function (obj, value) {
        obj.setPropertyValue("maskType", value);
        const q = getCompositeInput(obj);
        if (q) q.maskType = value;
      },
    },
    {
      name: "maskSettings:masksettings",
      category: "mask",
      visibleIndex: 1,
      dependsOn: ["maskType"],
      onGetValue: function (obj) {
        const q = getCompositeInput(obj);
        return q ? q.maskSettings : {};
      },
      onSetValue: function (obj, value) {
        const q = getCompositeInput(obj);
        if (q) {
          q.maskSettings.setData(value);
        }
      },
    },
  ]);
}

关键点说明

1. 掩码类型管理：通过 maskType 属性明确指定当前使用的掩码类型
2. 动态配置加载：使用 onGetValue 和 onSetValue 回调确保掩码设置与当前类型匹配
3. 依赖关系：通过 dependsOn 确保掩码设置只在特定掩码类型下显示

最佳实践

1. 避免共享掩码对象：为每种掩码类型维护独立的配置对象
2. 明确类型转换：在切换掩码类型时，确保清除旧类型的设置
3. 组件隔离：确保复合问题中的每个输入组件都有自己独立的掩码配置
4. 状态同步：通过回调函数保持设计器与预览状态的一致性

总结

通过为不同掩码类型创建独立的对象并实现适当的回调函数，可以有效解决 SurveyJS 复合问题中掩码设置丢失的问题。这种方法不仅适用于日期时间掩码，也可以扩展到其他类型的输入掩码场景中，确保表单设计过程中的配置稳定性。