angular - 親の値に基づいて子要素を非表示および表示するために ngx-formly hideExpression を使用する方法

Question

私は正式にAngularに不慣れです

Formly を使用して、次のシナリオのフォームを作成したいと考えています。

1. 3つの兄弟要素があります
2. そのうちの 2 つの要素は、ラジオ ボタン グループである 1 つの兄弟要素の値に依存しています。つまり、 recipientQueryOptionに基づいて基本フォームと詳細フォームを非表示または表示したい
3. JSON ファイルを使用してスキーマを保存しているため、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.',
                }
            ]
        }
    ]
}