Проблема с автономным разбиением на страницы динамического MatTable с помощью matInput (Angular 5 Material Design)

У меня есть компонент и есть пустая форма с некоторыми матинпутами, и у меня есть мат-таблица с матинпутами в строках, все они распределены по мат-картам.

Количество строк в таблице является динамическим на основе другого matInput (в примере я назвал «диапазон»), поэтому я помещаю число в свой matInput, называемый «диапазон», и строки создаются динамически с помощью автономный paginator.

И это моя проблема, если мне нужно создать 20 строк и решить разместить 5 элементов на странице по размеру paginator, я заполняю matInput, которые есть в таблице, и когда я нажимаю на следующую страницу, столбцы с matInput сохраняют значения предыдущей страницы. Это не происходит с столбцами меток, такими как номер строки, только с столбцами с matInput. И я действительно не знаю, почему это происходит .. помогите, пожалуйста?

вот мой пример кода

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

• .ts-файл:

  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 файл:

  <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>
  

большое спасибо!! :)