反应性表格，如何在创建之前清理表格

Question

我有一个表格，在表格的每一行中都有一个按钮，如果单击>，则会显示一个模态，并带有（单击的）行详细信息。

每行的详细信息都不同。

我正在使用从服务加载详细信息的反应式表单。但是每次我在不同行上单击此“显示模式”按钮时，位于其上的“旧”控件都不会被删除，新控件只是与其串联

HTML代码-模式上显示的表单

<form #cp="ngForm" [formGroup]="cpForm" (submit)="onSubmit(cpForm)">

  <div formArrayName="formArray">
    <div class="margin-top20 margin-bottom20" *ngFor="let cItem of arrayRef.controls; let i = index;" [formGroupName]="i">

      <span class="ui-float-label relative" style="display: inline-block;">
        <textarea [id]="cItem.value.commandKey" [name]="cItem.value.commandKey" pInputTextArea formControlName="commandData" style="width: 50em;">
          {{cItem.value.commandData}}
        </textarea>
        <label [for]="cItem.value.commandKey">
          {{cItem.value.commandKey}}
        </label>
      </span>

      <span class="absolute margin-top10 margin-left5">
        <p-button label="" icon="fa fa-trash-o" styleClass="ui-button-danger" style="display: inline-block;" (onClick)="delField( )"></p-button>
      </span>
    </div>
  </div>


  <p-button label="Add Field" (click)="addField()"></p-button>
  <!--TODO - Add Field-->
  <input type="text" id="new-name" *ngIf="showDelInput" autocomplete="off" class="margin-top20 margin-bottom20" placeholder="Enter new field name" size="30" pInputText>

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

TS

createForm() { // getting call in the constructor
    debugger;

    this.cpForm = this.fb.group({
      formArray: this.fb.array([])
    })
  }

function(){
...
this.commandKeys.forEach(key =>
             this.arrayRef.push(this.cpData(key)));
...
}
  cpData(key) {
    return this.fb.group({
      commandKey: key,
      commandData: this.commandPacket[key]
    })
  }

我尝试使用formArray.reset()，但看不到它在做什么。