Question

我正在尝试在Angular Material Table中为每行创建FormArray（这意味着我表中有6行，并且我想创建6个表单数组，但它应该为每行自动添加，没有选项，例如添加行）。我遇到类似这样的错误：

错误错误：找不到每行的路径为'time_sheet_array-> 4'的控件，并且在创建表单数组之后，我想提交包含6个带有值的表单数组的整个表单，请帮助我解决这个问题，谢谢。

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

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);
}

结果：->

实际上，这是一种包含许多表单数组的时间表表单，我想通过有角度的材料表来显示它，因此对我来说将非常容易，并且字段应可编辑。通过表格显示后，我想提交完整的表格。

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;
    }
  );
}

如何在角材料表中创建表单数组

1 个答案: