如何使用 KeystoneJS Next 根据另一个字段的值显示/隐藏管理 UI 中的字段？

Question

我在 Category 中设置了一个 schema.ts 模型，如下所示：

Category: list({
  fields: {
    name: text(),
    type: select({
      options: [
        { label: "MultipleChoice", value: "MultipleChoice" },
        { label: "Range", value: "Range" },
      ],
      defaultValue: "...",
      isRequired: true,
      isUnique: true,
      ui: { displayMode: "segmented-control" },
    }),
    from: integer(),
    to: integer(),
    options: text()
  },
})

这会在管理 UI 中呈现这些组件：

我想仅在选择 from 时显示 to 和 Range 字段（隐藏 options 字段），反之亦然，当 MultipleChoice被选中。有没有办法通过 Keystone Next 实现这一目标？

我还尝试了另一种方法，将不同模型中的类别类型拆分，然后以某种方式将它们与 Category 模型相关联，但我不知道该怎么做。类似的东西：

CategoryRange: list({
  ui: {
    isHidden: true,
  },
  fields: {
    from: integer(),
    to: integer(),
  },
}),
CategoryMultipleChoice: list({
  ui: {
    isHidden: true,
  },
  fields: {
    options: text(),
  },
})

Answer 1

条件字段为 supported in Keystone 4，但尚未提出。

现在，在 Keystone Next 中，您能做的最好的事情可能是创建一个自定义字段类型，将“类型”和“从/到”字段收集在一起。这将允许您在管理 UI 中定义一个界面，该界面实现了您喜欢的任何呈现规则。您需要参考使用 existing field types 作为指南。

或者，“条件字段”功能和自定义字段类型文档都应该在未来几个月内推出，因此，如果您能忍受稍微有点卡顿的 UI，您可能会发现您的用例将得到更多解决那么很容易。