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

Question

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

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).

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'
}

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

I've tried:

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.

Kissner

Updated with some additional attempts based on further research, but none work. Perhaps there is no way to conditionally show/hide a key item based on the value of a select? – Kissner

You'll want to include what tool you are using in order to get any useful feedback. JSON Schema was not designed for form generation, so all tools that try to use JSON Schema for form generation do it in their own unique way. – Embry

@JasonDesrosiers, thanks. I'm using Json-Schema-Form for Angular 6, – Kissner

Your JSON isn't formatted correctly (missing quotes and ending brackets and parenthesis). – Anthology

Answer 1

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']
 },
...
]

Kissner