Как использовать ngx-formly hideExpression для скрытия и отображения дочерних элементов на основе значения родителей

Я новичок в угловой форме

Я хочу использовать formly для создания формы для следующего сценария:

  1. есть три родственных элемента
  2. из которых два элемента зависят от значения одного родственного элемента, который является группой переключателей. т.е. я хочу скрыть или отобразить базовую и расширенную форму на основе recipientQueryOption
  3. Я использую файл 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'"

https://github.com/ngx-formly/ngx-formly/issues/2125

Другие вопросы по тегам