Question

这是我的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">

错误：mat-table上的FormArray->在路径上找不到控件（角度6）

0 个答案: