Angular 4 FormBuilder，带动态FormControls的FormGroup

Question

我的应用程序允许用户从事件下拉列表中进行选择，每个事件都有自己独特的一组属性和属性值可供选择。

这被表示为事件的FormGroup，事件的每个属性都带有FormControl。在初始化时，FormGroup会填充默认事件的属性，并且当选择新事件时，FormGroup将在删除所有旧的FormControl之前删除新事件的属性“FormControls”。我这样做是为了能够重置事件属性选择下拉列表并在事件更改时设置其默认值。

例如，事件1具有属性“prop1”和“prop2”，事件2具有属性“prop3”，“prop4”和“prop5”。页面加载时，选择事件1并显示两个选择下拉菜单，一个用于prop1，另一个用于prop2，每个都有自己的一组值。当用户选择事件2时，现有的选择下拉列表将被删除，替换为prop3，prop4和prop5的三个新选项。

刷新事件属性下拉菜单的工作不使用FormBuilder，FormGroup和FormControl。问题是，当多个事件具有同名的属性时，属性下拉与基础数据不同步（在事件选择时重置），属性下拉列表保留旧的用户选择值而不是重置。

当我尝试使用FormBuilder等被抛出此错误：

Error: No value accessor for form control with name: 'prop1'

app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
... 

@NgModule({ 
    ... 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    ReactiveFormsModule 
    ], 

app.component.ts

import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; 
... 

@Component({ 
    ... 
}) 
export class AppComponent implements OnInit { 
    ... 
    propertiesFormGroup: FormGroup; 

    constructor(private fb: FormBuilder) { } 

    ngOnInit() { 
    this.propertiesFormGroup = this.fb.group({}); 
    ... 
    for (let p in this.propertiesDefinitions) { 
     pValues = [...]; 
     this.propertiesFormGroup.addControl(p, new FormControl(pValues[0])); 

app.component.html

<div id="property-container" [formGroup]="propertiesFormGroup"> 
    ... 
    <ul id="event-properties"> 
    <li *ngFor="let p of properties"> 
     <select ...> 
     <option *ngFor="let v of pValues" [formControlName]="p">{{ v }}</option> 

我发现这样在模板中使用至今的静态formControlName值的答案，这将不会在这里工作。我的动态formControlName模板引用似乎工作，因为错误消息包含正确的属性名称（“prop1”）。我试图避免使用ngModel，因为数据模型和表单模型确实有所不同。我怎样才能解决这个问题？