1

这是我的html：

<form [formGroup]="taskTableForm">
  <div id="divTable">
    <table mat-table formArrayName="taskDetail" [dataSource]="this.dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef> Action </th>
        <td mat-cell *matCellDef="let element">
          <mat-form-field>
            <mat-select formControlName="action" [(ngModel)]="element.action" (valueChange)="actionEdited(element, $event)">
              <mat-option *ngFor="let action of fetchService.actions" [value]="action">{{action.name}}</mat-option>
            </mat-select>
          </mat-form-field>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns; let i=index" [formGroupName]="i"></tr>
    </table>
  </div>
</form>

这是我的 ts：

 protected taskTableForm: FormGroup;

[...]
     const control = <FormArray>this.taskTableForm.controls["taskDetail"];
     const newTaskGroup: FormGroup = this.initItems();
     control.push(newTaskGroup);
[...]

public initItems(): FormGroup {
    return this.fb.group({
      action: [null, Validators.required],
    });
  }

我从调试器返回的错误是：错误：找不到带有路径的控件：'taskDetails -> action'

我应该如何设置正确的路径？

我从这里有这个例子：https ://stackoverflow.com/a/45155324/5545770 --> 它基于“普通”表，但它也应该在mat-table上工作，对吧？

[更新] 我只是在错误的标签上设置了formGroupName

因为它是：

<tr mat-row *matRowDef="let row; columns: displayedColumns; let i=index" [formGroupName]="i"></tr>

它应该是：

<td mat-cell *matCellDef="let element; let i=index" [formGroupName]="i">
4

0 回答 0