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，因爲數據模型和表單模型確實有所不同。我怎樣才能解決這個問題？