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（）作为值的键和值对的损害。

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

1 个答案: