根据Angular中的现有值将FormControl值添加到FormBuilder.group

Question

我有一个Angular Dynamic Form，其中FormGroup如下所示：

createFilterGroup() {
        return this.formBuilder.group({
            company: new FormControl('', Validators.required),
            site: new FormControl('', Validators.required),
            countryCode: new FormControl('', Validators.required),
            city: new FormControl('', Validators.required),
            topic: new FormControl('')
        });
    }

topic部分未显示在UI上，但应根据用户的输入来创建：

我希望使topic的值如下：

<company_value>/<site_value>/<countryCode>/<city_value>/+/env

这些值来自如下所示的形式：

如果用户点击添加网站，则将创建另一个表单。

如所观察到的，topic是用户没有填写的，但我希望根据用户的输入来填写值。

当前，我必须基于以下函数调用添加topic值：

createTopicString() {
        this.siteDynamicForm.value.filters.forEach(filter => {
            const topicString = `${filter.company}/${filter.site}/${filter.countryCode}/${filter.city}/+/env`;
            filter.topic = topicString;
        });
    }

我在一个按钮单击调用中调用了此函数。

这里的问题是，如果用户忘记单击按钮，则topic的值仍然为""并引起问题。

我想知道是否有一种方法可以在formBuilder中执行类似的操作

return this.formBuilder.group({
            company: new FormControl('', Validators.required),
            site: new FormControl('', Validators.required),
            countryCode: new FormControl('', Validators.required),
            city: new FormControl('', Validators.required),
            topic: `${company}/${site}/${countryCode}/${city}/+/env`
        });

用户开始填写表单后，topic将根据用户输入自动开始填写。

Source for Dynamic Forms via Angular in Depth