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

Я новичок в angular formly

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

  1. есть три родственных брата элементы
  2. , из которых два элемента зависят от значения одного родственного элемента, который является группой переключателей. т.е. я хочу скрыть или отобразить базовый c и предварительный форма на основе receientQueryOption
  3. Я использую файл JSON для сохранить схему, чтобы не было возможности записать выражение скрытия непосредственно в схему.

Я пытался использовать Extension для скрытия выражения, но обнаружил, что в Extension данные, доступные в модели, ограничены элементом, в котором выражение Hide написано и его дочерние элементы и не содержит данных для своего родительского элемента. поскольку данные для родителя недоступны, я не могу проверить значение переключателя и не могу решить, скрывать ли элемент или нет.

следующая схема 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.',
                }
            ]
        }
    ]
}
...