javascript - 如何在 Angular Material 表中创建表单数组

Question

我正在尝试在 Angular Material Table 中为每一行创建 FormArray(这意味着我的表中有 6 行，我想创建 6 个表单数组，但它应该为每一行自动添加，没有像添加行这样的选项)。我面临这样的错误:

ERROR Error: Cannot find control with path: 'time_sheet_array -> 4' for each rows and after creating form arrays I want to submit the whole form which contains 6 form arrays with values, please help me to come out of this problem, thanks in advance.

我已经创建了 Material 表并能够显示所有值。但是我无法为每一行创建表单数组。

table.html:

<div>
  <form [formGroup]="time_form">
    <table mat-table [dataSource]="dataSource" formArrayName="time_sheet_array" class="mat-elevation-z8">

      <!-- Position Column -->
      <ng-container matColumnDef="DAYS">
        <th mat-header-cell *matHeaderCellDef> DAYS </th>

        <td mat-cell *matCellDef="let element;let i = index;" [formGroupName]="i">
          <mat-form-field>
            <input matInput type="text" formControlName="days" [value]="element.dayOfWeek">
          </mat-form-field>
        </td>

      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="DATE">
        <th mat-header-cell *matHeaderCellDef> DATE </th>

        <td mat-cell *matCellDef="let element;let i = index;" [formGroupName]="i">
          <mat-form-field>
            <input matInput type="text" formControlName="date" [value]="element.dateOfDay">
          </mat-form-field>
        </td>

      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="HOURS">
        <th mat-header-cell *matHeaderCellDef> HOURS </th>

        <td mat-cell *matCellDef="let element;let i = index;" [formGroupName]="i">
          <mat-form-field>
            <input matInput formControlName="hours" [value]="element.hours" placeholder="HOURS">
          </mat-form-field>
        </td>

      </ng-container>

      <ng-container matColumnDef="ACTIVITIES">
        <th mat-header-cell *matHeaderCellDef> ACTIVITIES </th>

        <td mat-cell *matCellDef="let element;let i = index;" [formGroupName]="i">
          <mat-form-field>
            <input matInput formControlName="activities" [value]="element.activity" placeholder="ACTIVITIES">
          </mat-form-field>
        </td>

      </ng-container>


      <!-- Symbol Column -->
      <ng-container matColumnDef="MODIFIED_BY">
        <th mat-header-cell *matHeaderCellDef> MODIFIED-BY </th>

        <td mat-cell *matCellDef="let element;let i = index;" [formGroupName]="i">
          <mat-form-field>
            <input matInput formControlName="modified_by" [value]="element.timesheetFilledByUserName" placeholder="ACTIVITIES">
          </mat-form-field>
        </td>

      </ng-container>

      <ng-container matColumnDef="TIME">
        <th mat-header-cell *matHeaderCellDef> TIME </th>

        <td mat-cell *matCellDef="let element;let i = index;" [formGroupName]="i">
          <mat-form-field>
            <input matInput formControlName="time" [value]="element.timesheetFilledByUserTime" placeholder="ACTIVITIES">
          </mat-form-field>
        </td>

      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  </form>
  <br>
  <div class="buttoncenter">
    <button mat-raised-button type="submit" color="primary" class="button" (click)="save_timesheet(time_form.value)">SAVE TIMESHEET</button>
  </div>
</div>

table.ts:

time_form: FormGroup;
private time_sheet_array: Array < any > = [];

response: user_timesheet[];
dataSource: MatTableDataSource < user_timesheet > ;

displayedColumns = ['DAYS', 'DATE', 'HOURS', 'ACTIVITIES', 'MODIFIED_BY', 'TIME'];

constructor(private _formBuilder: FormBuilder, private service: ServicesService) {}

ngOnInit() {
  this.time_form = this._formBuilder.group({
    time_sheet_array: this._formBuilder.array([
      this._formBuilder.group({
        days: [''],
        date: [''],
        hours: [''],
        activities: [''],
        modified_by: [''],
        time: ['']
      })
    ])
  })
  this.user_timesheet();
}

user_timesheet() {
  this.service.user_timesheet(credentials).subscribe(
    response => {
      this.dataSource = response;
    }
  );
}

save_timesheet(value) {
  console.log("timesheet values:::", value);
}

结果:->

实际上这是一种包含许多表单数组的时间表表单，我想通过 Angular Material 表来显示它，所以对我来说很容易，而且字段应该是可编辑的。通过表格显示后，我想提交完整的表格。

Answer 1

如果你有一个 formGroup 的 formArray，它只是等于 array.controls 的 dataSource

this.dataSource = this.myformArray.controls;

每一列都有一个*matCellDef="let element"，我们使用formControl="element.get('nameOfControl')"进行输入

例如对于具有属性“prop1”的 formGroup 的 formArray

myFormArray=FormArray([new FormGroup({
    prop1:new FormControl()
  })
])

表格是这样的

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container *matColumnDef="prop1">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element">
       <input arrow-div [formControl]="element.get('prop1')">
       </td>
  </ng-container>
  ...
</table>

更新假设你有

user_timesheet() {
  this.service.user_timesheet(credentials).subscribe(
    response => {
        response.data.forEach(data => {
        const formGroup = new FormGroup({
          days:new FormControl(data.days),
          date:new FormControl(data.date),
          ...
        })
        (this.time_form.get('time_sheet_array') as FormArray).push(formGroup)
      })
      this.dataSource = (this.time_form.get('time_sheet_array') as FormArray).controls;
    }
  );
}