Как использовать ngx-formly hideExpression для скрытия и отображения дочерних элементов на основе значения родителей
Я новичок в угловой форме
Я хочу использовать formly для создания формы для следующего сценария:
- есть три родственных элемента
- из которых два элемента зависят от значения одного родственного элемента, который является группой переключателей. т.е. я хочу скрыть или отобразить базовую и расширенную форму на основе recipientQueryOption
- Я использую файл JSON для хранения схемы, поэтому не могу записать выражение скрытия непосредственно в схему.
Я пробовал использовать Extension для скрытия выражения, но, как я обнаружил, что в Extension данные, доступные в модели, ограничены элементом, в который записано скрытое выражение, и его дочерними элементами и не содержат данных для его родительского элемента. поскольку данные для родителя недоступны, я не могу проверить значение переключателя и не могу решить, скрывать элемент или нет.
Ниже приводится схема JSON:
{
key: 'Recipients',
fieldGroup: [{
key: 'recipientQueryOption',
type: 'radio',
templateOptions: {
required: true,
options: [{
value: 'queryBuilder',
label: 'queryBuilder'
},
{
value: 'queryEditor',
label: 'queryEditor'
},
],
},
defaultValue: 'queryBuilder'
},
{
key: "basic",
fieldGroup: [{
key: 'recipients',
type: 'chips',
templateOptions: {
label: 'Recipients',
placeholder: 'add recipients...',
required: true,
}
}],
hideExpression: "hide_expression"
},
{
key: "advance",
fieldGroup: [{
key: 'recipients',
type: 'textarea',
templateOptions: {
label: 'Recipients',
placeholder: 'Enter Query',
required: true,
}
},
{
template: '<b>Note:</b> No validation is done on the queries submitted from the Query Editor tab.',
}
]
}
]
}
1 ответ
hideExpression: "field.parent.model. advance !== 'true/false'"