Json Schema Form Condition显示/隐藏基于枚举选择的项目

问题描述

我有一个使用JSON Schema Form( angular6-json-schema-form )以JSON模式构建表单.

I have an angular project in which I'm using JSON Schema Form (angular6-json-schema-form) to build forms in JSON schema.

json模式表单规范允许使用条件开关基于另一个表单元素的值来选择性地显示/隐藏元素.但是，文档中给出的唯一示例是简单的布尔值(如果X具有或不具有值，则显示Y).

The json schema form specification allows the use of a condition switch to selectively show/hide elements based on the value of another form element. The only examples given in the docs though are simple boolean's (if X has a value or not, then show Y).

在我的示例中，当从选择列表中选择选择的文本输入类型为(文本，电子邮件，URL)之一但不显示时，我需要显示/隐藏占位符"文本输入当其(密码，颜色)时.请参阅下面的枚举数组，其中包含我需要测试的选项.

In my example, I need to show/hide a "placeholder" text input when the text input type selected from a select list is one of (text, email, url) but NOT show it when its (password, color). See the enum array below that contains the options I need to test against.

{
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"'
},
}

在上面的示例中，唯一可以显示/隐藏占位符元素的内容如下:

In the example above, the only thing that I can get to work to show/hide the placeholder element is below:

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

它简单地示出了被选择比NONE以外的任何时的元素.

Which simply shows the element when ANYTHING other than NONE is selected.

我尝试过:

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

无论类型选择元素中选择了什么，这些都不会触发占位符元素的出现.

And none of these trigger the appearance of the placeholder element, regardless what is selected in the type select element.

推荐答案

这是我实施的可解决问题的可行解决方案:

Here is the working solution I've implemented that resolves my question:

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 Schema Form Condition显示/隐藏基于枚举选择的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！