如何使用 KeystoneJS Next 根据来自另一个字段的值 show/hide admin UI 中的字段？

Question

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

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:

我想仅在选择 Range 时显示 from 和 to 字段（隐藏 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. They haven't been brought forward to Keystone 6 (aka. "Next") yet but they're on the roadmap。我希望对他们的支持会在接下来的几个月内到来。

现在，在 Keystone 6 中，可能你能做的最好的事情就是 create a custom field type 收集“类型”和“from/to”领域在一起。这将允许您在 Admin UI 中定义一个接口，实现您喜欢的任何表示规则。

如何使用 KeystoneJS Next 根据来自另一个字段的值 show/hide admin UI 中的字段？

How to show/hide fields in the admin UI depending on the value from another field with KeystoneJS Next?

keystonejs