Json 架构表单条件 show/hide 基于枚举所选项目

Question

我有一个 angular 项目，我在其中使用 JSON 模式表单 (angular6-json-schema-form) 在 JSON 模式中构建表单。

json 架构表单规范允许根据另一个表单元素的值使用条件切换 select 有效地 show/hide 元素。尽管文档中给出的唯一示例是简单的布尔值（如果 X 有值或没有值，则显示 Y）。

在我的示例中，当文本输入类型为 selected 时，我需要 show/hide 一个 "placeholder" 文本输入 select 列表是（文本、电子邮件、url）之一，但在它的（密码、颜色）时不显示它。请参阅下面的枚举数组，其中包含我需要测试的选项。

{
schema: {
type: 'object',
required: ['title'],
properties: {
type: {
    title: 'Input Type',
    description: 'Input type assists browser/phone UI behavior',
    type: 'string',
    enum: ['color', 'email', 'integer', 'number', 'password', 'tel', 'text']
  },
placeholder: {
    title: 'Placeholder',
    description: 'The placeholder is shown inside the text element by default',
    type: 'string'
  }
},
layout: [
{ items: ['title', 'type'] },
{
  key: 'placeholder',
  condition: 'model.type.enum[selectedValue]!=="color"'
},
}

在上面的例子中，我唯一能做的就是 show/hide 占位符元素如下：

{
  key: 'placeholder',
  condition: 'model.type'
}

当 NONE 以外的任何东西被 selected 时，它只显示元素。

我试过：

condition: 'model,type.modelValue !== "color"'
condition: 'type.modelValue !== "color"'
condition: 'model.type !== "color"'

其中 none 会触发占位符元素的出现，无论 select 在类型 select 元素中编辑了什么。

Answer 1

这是我实施的解决我的问题的有效解决方案：

layout: [
 { items: ['title', 'type'] },
 {
 type: 'section',
  condition: {
    functionBody: 'try { return model.type && model.type!=="color" && model.type!=="password" } catch(e){ return false }'
  },
  items: ['placeholder']
 },
...
]

Json 架构表单条件 show/hide 基于枚举所选项目

Json Schema Form Condition show/hide based on enum selected item

jsonschema

angular6-json-schema-form