Условие формы схемы Json показать / скрыть на основе выбранного элемента перечисления
У меня есть угловой проект, в котором я использую JSON Schema Form ( https://www.npmjs.com/package/angular6-json-schema-form) для создания форм в JSON-схеме.
Спецификация формы схемы json позволяет использовать переключатель условий, чтобы выборочно отображать / скрывать элементы на основе значения другого элемента формы. Единственными примерами, приведенными в документации, являются простые логические (если X имеет значение или нет, тогда показывает Y).
В моем примере мне нужно показать / скрыть текстовый ввод "заполнитель", когда тип ввода текста, выбранный из списка выбора, является одним из (текст, электронная почта, URL), но НЕ отображать его, когда он (пароль, цвет). Посмотрите массив enum ниже, который содержит опции, с которыми мне нужно протестировать.
{
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"'
},
}
В приведенном выше примере единственное, что я могу получить, чтобы показать / скрыть элемент-заполнитель, это ниже:
{
key: 'placeholder',
condition: 'model.type'
}
Который просто показывает элемент, когда выбрано НИЧЕГО, кроме NONE.
Я пробовал:
condition: 'model,type.modelValue !== "color"'
condition: 'type.modelValue !== "color"'
condition: 'model.type !== "color"'
И ни один из них не вызывает появление элемента-заполнителя, независимо от того, что выбрано в элементе выбора типа.
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']
},
...
]