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