Mat Paginator не работает с FormArray в таблице материалов - PullRequest
Новая
       17

Mat Paginator не работает с FormArray в таблице материалов

2 голосов
/ 27 мая 2020

Я использую mat-table с formArray в нем, также мне нужен Mat-paginator.

Но, к сожалению, разбивка на страницы не работает.

Stackbltiz Demo

Источник выборки,

. html

<code><form [formGroup]="form">
  <table mat-table [dataSource]="dataSource" formArrayName="dates">
    <!-- Row definitions -->
    <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
    <tr mat-row *matRowDef="let row; let i = index; columns: displayColumns;"></tr>

    <!-- Column definitions -->
    <ng-container matColumnDef="from">
      <th mat-header-cell *matHeaderCellDef> From </th>
      <td mat-cell *matCellDef="let row; let index = index"  [formGroupName]="index"> 
        <input type="date" formControlName="from" placeholder="From date">
      </td>
    </ng-container>

    <ng-container matColumnDef="to">
      <th mat-header-cell *matHeaderCellDef> To </th>
      <td mat-cell *matCellDef="let row; let index = index"  [formGroupName]="index">
        <input type="date" formControlName="to" placeholder="To date">
      </td>
    </ng-container>
  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  <button type="button" (click)="addRow()">Add row</button>
</form>

<pre>{{ form.value | json }}

.Ts 

@ViewChild(MatPaginator) paginator: MatPaginator;
      dataSource = new MatTableDataSource<any>();
      displayColumns = ['from', 'to'];
      form: FormGroup = this.fb.group({ 'dates': this.fb.array([]) });

      constructor(private fb: FormBuilder) { }

      ngOnInit() {
        this.dataSource.paginator = this.paginator;
      }

      get dateFormArray():FormArray {
        return this.form.get('dates') as FormArray;
      }

      addRow() {
        const row = this.fb.group({
          'from'   : null,
          'to'     : null
        });
        this.dateFormArray.push(row);
        this.dataSource.data =  this.dateFormArray.controls;
      }

1 Ответ

2 голосов
/ 17 июня 2020

На самом деле есть две проблемы:

  1. mat-paginator проблема ссылки на элемент в @ViewChild
  2. Получение фактического индекса для MatDataSource (потому что у вас есть две структуры данных для список данных dataSource и FormArray)

решение для первой проблемы состоит в том, чтобы импортировать paginator и mat-datasource, как это 

import { MatPaginator } from "@angular/material/paginator";
import {MatTableDataSource} from '@angular/material/table';

, для второй проблемы вы должны получить актуальную проиндексируйте следующим образом: 

getActualIndex(index : number)    {
    return index + this.paginator.pageSize * this.paginator.pageIndex;
}

и используйте [formGroupName]="getActualIndex(index)"

РАБОЧИЙ ПРИМЕР

Также вы можете увеличить размер страницы в раскрывающемся списке, как вы добавить элемент в formArray.

...