用控件填写表单(根据从服务返回的数据)

我正在尝试将模型驱动的表单迁移到反应式表单。

这是一个动态表单,根据来自 getCommandPacket this.renderSvc.getCommandPacket -正在从服务器获取数据,这是函数签名:

服务器

..
 [HttpGet("[action]")]
        public Dictionary<string, string> GetCommandPacket(int ID){
..
}
..

HTML格式

<form>
  <div *ngFor="let key of commandKeys">
    <span class="ui-float-label">
      <textarea [id]="key" [name]="key" pInputTextArea [(ngModel)]="commandPacket[key]" style="width: 40em;"></textarea>
      <label [for]="key">{{ key }}</label>
    </span>
  </div>

  <p-button label="Add Field"></p-button>

  <button p-button type="submit" icon="fa fa-angle-right" iconPos="right">
    <span class="ui-button-text ui-clickable">Re-Submit</span>
  </button>
</form>

TS

...
export class CommandPacketDetailsComponent implements OnInit {
  @Input() id: number;
  myForm: FormGroup;

  constructor(private renderSvc: PfServerService, private fb: FormBuilder) {
  }

  commandPacket: { [key: string]: string; };
  commandKeys: string[];
  message: string = null;

  ngOnInit() {

    if (this.id !== 0 && typeof this.id !== "undefined")
      this.getCommandPacket(this.id);
    else
      this.message = "No ID Given for Packet"; 
  }

  getCommandPacket(id: number) {
    this.renderSvc.getCommandPacket(id).subscribe(data => {
      this.commandPacket = data;
      this.commandKeys = Object.keys(this.commandPacket);
    });
  }
...

我怎样才能达到同样的效果 Reactive-form 怎么了?