如何为我的表单组动态生成密钥？

Question

我有一个在我的组件中声明的 FormGroup。它看起来像这样。

this.providerForm = this.fb.group({
        specialty: this.entityService.getUrlQuery('specialty') || null,
        language: this.entityService.getUrlQuery('language') || null,
        gender: this.entityService.getUrlQuery('gender') || null,
        distance: this.entityService.getUrlQuery('distance') || null,
        affiliation: this.entityService.getUrlQuery('affiliation') || null,
        primaryCare: this.entityService.getUrlQuery('primaryCare') || '',
        accomodations: this.entityService.getUrlQuery('accomodations') || '',
        newPatients: this.entityService.getUrlQuery('newPatients') || ''
    });

我试图通过使用数组中的键值来设置我的表单组的键值来使我的表单动态化。所有的值都将调用同一个函数，并将键的值作为参数传递。如何使用数组中的键填充我的表单组？

下面是我的代码的相关部分。

this.pageConfigsService.getPageConfigs('provider_search', 'results')
    .subscribe(
        response => {
            if (this.entityService.getUrlQuery('entity_type') === 'provider') {
                this.pageConfigs = response['results']['provider'];

                for (let config of this.pageConfigs) {
                    this.providerForm = this.fb.group({
                        [config.key]: this.entityService.getUrlQuery([config.key]) || null
                    })
                }
            }
        }
    )

     // db.json
       "pharmacy": {
            "filters": [                    
                {
                    "key": "language",
                    "label": "Language",
                    "options": [
                        "English", "Spanish", "French"
                    ]
                },
                {
                    "key": "gender",
                    "label": "Gender",
                    "options": [
                        "Male", "Female"
                    ]
                },
                {
                    "key": "distance",
                    "label": "Distance",
                    "options": [
                        "under 5 miles", "under 10 miles", "under 15 miles", "under 25 miles", "under 50 miles", "far"
                    ]
                },
                {
                    "key": "affiliation",
                    "label": "Affiliation",
                    "options": [
                        "option 1", "option 2", "option 3"
                    ]
                }
            ]
        }

Answer 1

这就是我要找的。

    this.filtersForm = new FormGroup({});
    this.pageConfigsService.getPageConfigs('provider_search', 'results')
    .subscribe(
        response => {
            this.pageConfigs = response['results'];
            this.filters = this.pageConfigs[this.entityService.getUrlQuery('entity_type')].filters;

            this.filters.forEach(filter => {
                console.log(filter.key);
                this.filtersForm.addControl(filter.key, new FormControl());
            });
        }
    )

在基本层面上，formGroup({}) 包含键和值对，这些键和值对使用键并传递 FormControl() 作为值。

如何为我的表单组动态生成密钥？

How can I dynamically generate keys for my Form Group?

for-loop

dynamic

angular

angular-reactive-forms