如何在angular-material-table内部创建表单数组 [英] How to create form arrays inside the angular-material-table

问题描述

我试图在Angular Material Table中为每行创建FormArray(这意味着我表中有6行，我想创建6个表单数组，但它应该为每行自动添加，没有类似的选项添加行).我遇到类似这样的错误:

I'm trying to create FormArray inside Angular Material Table for each rows(it means I have 6 rows in my table and I want create 6 form arrays but it should add automatically for each rows, there is no option like adding row). I am facing error like:

错误错误:找不到每行的路径为'time_sheet_array-> 4'的控件，并且在创建表单数组之后，我想提交包含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.

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

I have created material table and able to display all values. But I am unable to create form arrays for each rows.

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

结果:->

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

actually this is kind of time sheet form which contains many form arrays, i want to display it through angular material table, so it will be very easy for me and field should be editable. after displaying through table i want to submit full form.

推荐答案

如果您有一个formgroup的formArray，则它只是array.controls的dataSource

If you has a formArray of formgroup it's only equal dataSource to the array.controls

this.dataSource = this.myformArray.controls;

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

Each column has a *matCellDef="let element", and we make a input using formControl="element.get('nameOfControl')"

例如具有属性"prop1"的formGroup的formArray

e.g. for a formArray of formGroup that has a propertie "prop1"

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

这篇关于如何在angular-material-table内部创建表单数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！