Angular *ngFor动态创建的表单组件将值保留在表单控件中

我试图在mat扩展面板（和对话框）中动态生成表单，以提供整个上下文。现在，我使用*ngFor循环成功地生成了新的扩展面板和内部表单。问题来自两点：

• 扩展面板内的表单来自我编码的组件
• 用户负责通过单击“添加”按钮生成新的扩展面板和其中的表单

最终的结果是，一切都按预期进行，但如果用户开始在第一个表单中填写一些信息，并决定在accordion中创建一个新表单，则新创建的表单将在其表单控件中填充上一个聚焦表单的数据：(

下面是一个代码示例

家长手风琴

（…）
阿尤德公寓酒店
添加
{{公寓名称}
{{公寓.说明}

添加第二个表单

感谢您的帮助！
稍微更改一下您的表单，但简单地说，完成我的评论的要素有：

<form *ngIf="form" [formGroup]="form">
<mat-accordion>
  <mat-expansion-panel *ngFor="let grp of form.controls;let i=index" [formGroup]="grp">
    <mat-expansion-panel-header>
      <mat-panel-title>
 <mat-panel-title>
                       {{grp.get('title').value}}
                  </mat-panel-title>
                  <mat-panel-description>
                       {{grp.get('description').value}}
                  </mat-panel-description> 
      </mat-panel-title>
    </mat-expansion-panel-header>
    <app-add-apartment-form [parentForm]="grp"></app-add-apartment-form>
  </mat-expansion-panel>
</mat-accordion>
</form>

你有一个功能

createGroup()
{
   return new FormGroup({
     title:new FormControl()
     description:new FormControl()
     floor:new FormControl() 
   })
}

你的孩子呢

<div [formGroup]="parentForm">
<input formControlName="title">
<input formControlName="description">
<input formControlName="floor">
</div>

1.-创建formGroups的表单数组，2.-在formArray控件上循环，3.-将formArray.at（index）传递给您的组件（或者如果迭代*ngFor=“grp of myArray.controls”，只需使用grp为您的子组件提供信息）好的，谢谢。所以我需要在我的子组件中动态生成表单控件。你能解释一下为什么我不能使用我的子组件的html文件模板吗？为什么ngfor要复制值？请看我的答案-我认为这不是必需的，所以当你在代码中输入表单时，谢谢。让我试试，然后回到你这里。谢谢。它像c一样工作我对你的代码做了一点修改，但这太完美了！再次感谢你。
createGroup()
{
   return new FormGroup({
     title:new FormControl()
     description:new FormControl()
     floor:new FormControl() 
   })
}

<div [formGroup]="parentForm">
<input formControlName="title">
<input formControlName="description">
<input formControlName="floor">
</div>

add()
{
  this.form.push(this.createGroup())
}