如何在Retool的JSON Schema Form中实现多选选项不可重复的功能

当前默认配置支持重复选择同个选项，非唯一选择效果如下：

原使用的JSON Schema代码：

{
  "type": "object",
  "properties": {
    "languages": {
      "type": "array",
      "items": {
        "type": "string",
        "enum": ["English", "Japanese", "Chinese"]
      }
    }
  }
}

要实现已选中选项不可重复选择的效果，可采用以下两种方案：

方案1：使用JSON Schema原生uniqueItems属性（优先推荐） #

直接在数组字段配置中添加"uniqueItems": true约束即可，该属性是JSON Schema标准属性，Retool官方表单组件已做适配，添加后会自动禁用重复选择操作，提交时也会自动做重复校验，修改后的代码如下：

{
  "type": "object",
  "properties": {
    "languages": {
      "type": "array",
      "uniqueItems": true,
      "items": {
        "type": "string",
        "enum": ["English", "Japanese", "Chinese"]
      }
    }
  }
}

实现效果如下：

方案2：动态过滤可选枚举值（适配自定义场景） #

如果使用的是自定义渲染的多选组件，或是Retool版本较低无法自动适配uniqueItems的展示效果，可以通过Retool动态表达式实时过滤已选中的选项，让已选选项直接不在可选列表中展示。
假设你的表单组件名称为form1，将enum配置改为动态表达式即可：

{
  "type": "object",
  "properties": {
    "languages": {
      "type": "array",
      "items": {
        "type": "string",
        "enum": {{ ['English', 'Japanese', 'Chinese'].filter(lang => !form1.data.languages?.includes(lang)) }}
      }
    }
  }
}

补充校验逻辑 #

如果需要额外增加提交层面的兜底校验，可以在表单提交事件中新增判断：{{ form1.data.languages?.length === [...new Set(form1.data.languages)].length }}，返回false时阻止提交并提示存在重复选择项即可。

内容的提问来源于stack exchange，提问作者Super Kai - Kazuya Ito