Блог

Я интегрировал форму в свою мат-таблицу с помощью FormArray, и я хочу загрузить ее в данные мат-входов с помощью get. Проблема в том, что если я удалю функцию initItemRows(), тогда мое намерение сработает. Но я хочу, чтобы эта функция была учтена, потому что я также добавляю и удаляю строки в таблице вручную. Что мне нужно сделать, чтобы мои данные отображались в мат-входах?

Моя работа: https://stackblitz.com/edit/angular-mat-table-with-api-call-r38g6b?file=app/table-basic-example.html

Мой код:

 // Part in HTML where tds are filled
<td mat-cell *matCellDef="let row; let i = index;">
                <div formArrayName="rows" *ngIf="attributesWithFormControls.includes(column.attribute); else otherColumns">
                  <span id="edit-cell" [formGroupName]="i">
                      <mat-form-field id="edit-calc-input">
                        <label>
                          <input matInput type="text" [formControlName]="column.attribute">
                        </label>
                      </mat-form-field>
                  </span>
                </div>
                <ng-template #otherColumns>
                  {{ column.object  !== null ? row[column.object][column.attribute] : row[column.attribute]  }}
                </ng-template>
              </td>

 

 // Array
 private testColumns: EditColumns[] = [
    { attribute: 'test1', name: 'First'},
    { attribute: 'test2', name: 'Second' },
    { attribute: 'test3', name: 'Third'}
  ];
// Form fields
  public attributesWithFormControls = ['test1', 'test2', 'test3'];

  ngOnInit(): void {

 // Form
    this.form = this.formBuilder.group({
      rows: this.formBuilder.array([this.initItemRows()])
    });
this.loadData();
}

 get formArr() {
    return this.calcBookingsForm.get('rows') as FormArray;
  }

  initItemRows() {
    return this.formBuilder.group({
      test1: [''], test2: [''], test3: ['']
    });
  }
 

  // Fill the table with data
  private loadData() {
this.service.getData().subscribe(
          (resp: any) => {
                 ....
              }
              // Definition of the FormRows
              const formRowsData = [];
              for (const attr of this.columns) {
                const columnData = rows.filter((d, rowIndex) => {
                  if (this.attributesWithFormControls.includes(attr)) {
                    if (!formRowsData[rowIndex]) {
                      formRowsData[rowIndex] = [];
                    }
                    // prepare row values for later use in form groups
                    formRowsData[rowIndex].push({ attr, value: d[attr] ? d[attr] : '' });
                  }
                  return d[attr] !== undefined amp;amp; d[attr] !== null;
                }).map((d) => {
                  return d[attr];
                });
                this.dataAttributesColumnFilter[attr] = _.uniq(columnData);
              }
              const test1FormArray = this.form.get('rows') as FormArray;
              // build form array values for text fields in data table rows
              for (const formRowDataEntry of formRowsData) {
                const consolidatedValues = {};
                // Combine rows values into one object
                for (const d of formRowDataEntry) {
                  consolidatedValues[d.attr] = d.value;
                }
                // bind values of one row to a form control group
                const rowGroup = this.formBuilder.group(consolidatedValues);
                nameFormArray.push(rowGroup);
              }
              this.dataSource.data = rows;
            } else {
              console.log('No data for this year!');
              this.dataSource.data = [];
            }
          },
          error => this.isLoading = false
        );
}