*ngFor 动态创建的表单组件在表单控件中保持价值

Question

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

扩展面板内的表单来自我编写的组件
用户负责通过单击 "add" 按钮生成新的扩展面板和内部表单

最终结果是一切都按预期工作，但如果用户开始在第一个表单中填写一些信息并决定在手风琴中创建一个新表单，则新创建的表单的表单控件会填满上一个重点表格的数据:(

这是一个代码示例

手风琴家长

(...)
<mat-step>            
    <ng-template matStepLabel>Ajouter des appartements</ng-template>           
    <button mat-raised-button (click)="addApartment()">Add</button>
    <mat-accordion multi="true">
        <mat-expansion-panel *ngFor="let apartment of apartments">
             <mat-expansion-panel-header>
                  <mat-panel-title>
                       {{apartment.title}}
                  </mat-panel-title>
                  <mat-panel-description>
                       {{apartment.description}}
                  </mat-panel-description>                
             </mat-expansion-panel-header>                
             <app-add-apartment-form [parentForm]="addLocationForm"></app-add-apartment-form>            
        </mat-expansion-panel>    
    </mat-accordion>            
</mat-step>
(...)

.ts 文件

(...)
addApartment(){
    this.apartments.push(new Apartment());
  }
(...)

子组件形式（没什么花哨的）


<div [formGroup]="parentForm">
    <p>
        <mat-form-field formGroupName="apartmentDetails"> 
            <input matInput placeholder="Titre" formControlName="title" width="30%">
            <mat-error *ngIf="f.title.invalid">{{getTitleErrorMessage()}}</mat-error>
        </mat-form-field>
    </p>
    <p>
        <mat-form-field formGroupName="apartmentDetails">
            <textarea matInput placeholder="Description" formControlName="description" width="30%"></textarea>
            <mat-error *ngIf="f.description.invalid">{{getDescriptionErrorMessage()}}</mat-error>
        </mat-form-field>
    </p>
    <p>
        <mat-form-field formGroupName="apartmentDetails">
            <mat-label>Etage</mat-label>
            <mat-select width="30%" formControlName="floor">
                <mat-option *ngFor="let floor of floors" [value]="floor.value">
                    {{floor.viewValue}}
                </mat-option>
            </mat-select>            
            <mat-error *ngIf="f.floor.invalid">{{getFloorErrorMessage()}}</mat-error>
        </mat-form-field>
    </p>
(...)

结果图片如下：

第一个表格填写https://i.imgur.com/4sfkWhE.png

添加第二种形式https://i.imgur.com/NL8X9h7.png

感谢您的帮助！

Answer 1

稍微更改一下您的表格，但简而言之，完成我的评论的要素是：

<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>

你的表格是

form=new FormArray([])

你有一个功能

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

还有你的children

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

您有一个函数 add 是

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

*ngFor 动态创建的表单组件在表单控件中保持价值

Dynamically created form component by *ngFor is keeping value in form controls

angular

forms

templates

components

dynamically-generated