I have an issue with my component that contains an empty form with matInputs, as well as a mat-table with matInputs in the rows, all enclosed in mat-cards.
The number of rows in the table is dynamic and based on another input called 'range'. So, when I set the 'range' value on my matInput, the rows are dynamically created with an offline paginator.
My problem arises when I create 20 rows and decide to display 5 items per page using the paginator. After filling in the matInputs within the table and clicking on the next page, the columns with matInputs retain the values from the previous page. This issue only affects the columns with matInputs and not label columns like the row numbers. I am unsure why this is happening and would appreciate any help!
Here is a link to the 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>
Thank you for your assistance!