Issue with offline pagination over dynamic MatTable with matInput's (Angular 5 Material Design)

Question

I have a component and there is an empty form with some matInput's, and I have a mat-table with matInput's into the rows too, all of them distributed in mat-card's.

The number of rows of the table are dynamic based on another matInput's (I called 'range' on the example), so, I put the number on my matInput called 'range', and the rows are created dynamicly with an offline paginator.

And this is my problem, if I need create 20 rows, and decide put 5 items per page on the paginator size, I fill the matInput's there are into the table, and when I click to the next page, the colums with matInput's keeps the previous page values. Its not happening with label colums like the number of the row, just the colums with matInput's. And I don't really know why is happening this.. some help please?

here is my sample code

(https://stackblitz.com/edit/angular-qhp2eg?file=app%2Ftable-http-example.ts)

• .ts file:

  import {Component, OnInit, ViewChild} from '@angular/core';
  import {MatPaginator, MatTableDataSource, MatSort} from '@angular/material';
  import {FormArray, FormBuilder, FormGroup} from '@angular/forms';
  import {merge, Observable, of as observableOf} from 'rxjs';
  import {catchError, map, startWith, switchMap} from 'rxjs/operators';
  
  /**
   * @title offline table pagination example
   */
  @Component({
    selector: 'example-offline-table',
    styleUrls: ['example-offline-table.css'],
    templateUrl: 'example-offline-table.html',
  })
  export class ExampleOfflineTable implements OnInit {
  
  
    displayedColumns: string[] = ['position', 'name', 'surname'];
    dataSource = new MatTableDataSource();
  
    public myFormObject: FormGroup;
    public myUsersTableArray: FormArray;
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
  
    constructor(private fb: FormBuilder) {
  
      this.myFormObject = this.getBuildForm();
  
      this.dataSource = new MatTableDataSource();
      this.dataSource.paginator = this.paginator;
    }
  
    ngOnInit() {
    }
  
    getBuildForm(): any {
  
      return this.fb.group({
        range: [''],
        users: this.fb.array([])
      });
    }
  
  
    createRowsByRange() {
      const theRange = this.myFormObject.get('range');
  
      this.myUsersTableArray = this.myFormObject.get('users') as FormArray;
  
      for (let index = 0; index < theRange.value; index++) {
  
        const position = index + 1;
  
        this.myUsersTableArray.push(
          this.fb.group({
            position: position,
            name: [''],
            surname: ['']
          })
        );
      }
      this.dataSource = new MatTableDataSource(this.myUsersTableArray.value);
      this.dataSource.paginator = this.paginator;
    }
  }
  

• .html file:

  <div class="example-container mat-elevation-z8">
    <form [formGroup]="myFormObject">
  
      <mat-form-field>
        <input matInput type="text" formControlName="range" (change)="createRowsByRange()" placeholder="Range">
      </mat-form-field>
  
      <div formArrayName="users">
        <div class="example-table-container">
  
          <mat-table #table [dataSource]="dataSource">
  
            <!-- Position Column -->
            <ng-container matColumnDef="position">
              <mat-header-cell *matHeaderCellDef>Pos.</mat-header-cell>
              <mat-cell *matCellDef="let row">
                {{row['position']}}
              </mat-cell>
            </ng-container>
  
  
            <!-- Name Column -->
            <ng-container matColumnDef="name">
              <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
              <mat-cell *matCellDef="let row;  let rIndex = index; ">
                <mat-form-field [formGroupName]="rIndex">
                  <input matInput type="text" formControlName="name" placeholder="Name">
                </mat-form-field>
              </mat-cell>
            </ng-container>
  
  
            <!-- Surname Column -->
            <ng-container matColumnDef="surname">
              <mat-header-cell *matHeaderCellDef>Surname</mat-header-cell>
              <mat-cell *matCellDef="let row;  let rIndex = index; ">
                <mat-form-field [formGroupName]="rIndex">
                  <input matInput type="text" formControlName="surname" placeholder="Surname">
                </mat-form-field>
              </mat-cell>
            </ng-container>
  
  
  
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
          </mat-table>
  
          <mat-paginator [pageSizeOptions]="[5, 10, 15]"></mat-paginator>
  
        </div>
      </div>
    </form>
  </div>
  

thanks a lot!! :)

Answer 1

got it!
just need change the formGroupName (index array) to the row position:

<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let row;">
        <mat-form-field [formGroupName]="row['position']">
            <input matInput type="text" 
            formControlName="name" placeholder="Name">
        </mat-form-field>
    </mat-cell>
</ng-container>