使用ngFor创建多个表单

Question

必须在ngx数据表的每个行详细信息内创建一个表单。

<ngx-datatable-row-detail [rowHeight]="'100%'" #serviceDetailRow (toggle)="onDetailToggle($event)">
    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <mat-tab-group>
        <mat-tab label="Components">
            <mat-card-actions class="component-actions">
            <form [formGroup]="addComponentForm" (ngSubmit)="addComponent(row.serviceId)">
                <mat-form-field class="add-component">
                <input matInput placeholder="Component Name" [formControl]="componentFormControl" [errorStateMatcher]="componenteMatcher">
                <mat-error *ngIf="componentFormControl.hasError('pattern') && !componentFormControl.hasError('required')">
                    Please enter a valid component name
                </mat-error>
                <mat-error *ngIf="componentFormControl.hasError('minlength') && !componentFormControl.hasError('required')">
                    Please enter at least 3 characters
                </mat-error>
                <mat-error *ngIf="componentFormControl.hasError('required')">
                    Component Name is <strong>required</strong>
                </mat-error>
                </mat-form-field>
                <button type="button" mat-raised-button color="primary">Add Components</button>
            </form>
            </mat-card-actions>
            ...
</ngx-datatable-row-detail>

点击扩展行按钮，我们会触发扩展行功能

toggleExpandRow(row) {
    this.servicesTable.rowDetail.toggleExpandRow(row);
    // Create component form
    console.log(this.services);

    this.addComponentForm[row.serviceId] = this.fb.group({
      component: this.componentFormControl
    });

** component.ts **

export class ServicesComponent implements OnInit {
  @ViewChild('servicesTable') servicesTable: any;
  addServiceForm: FormGroup;
  addComponentForm: FormGroup[] = [];

在尝试将formGroup附加到componentForm时，它是初始化为空数组的FormGroup数组，我收到错误消息

ERROR TypeError: this.form._updateTreeValidity is not a function