Angular PrimeNg (p-table) Nested Tables - Reactive Driven Form Validation

Question

I'm trying to create the nested table using prime ng p-table (turbo table) with form validation - reactive driven approach.

Here, I have implemented the code which is unable to edit/update the value either textbox nor p-inputmast.

Here's stackblitz Editor URL: https://stackblitz.com/edit/primeng-tables-tc5kpq

I'm able to achieve this using normal html tag. But, I need to fix this using primeng p-table.

app.component.ts

ngOnInit() {
    this.tableData = [
      [
        { name: 'Jack', age: 20 },
        { name: 'Mac', age: 22 },
        { name: 'Lightening', age: 42 },
      ],
      [
        { name: 'Jack1', age: 20 },
        { name: 'Mac2', age: 22 },
        { name: 'Lightening3', age: 42 },
      ]
    ];
    this.initilize();
  }
  initilize(){
    this.appForm = this.fb.group({
      tables: this.fb.array([])
    });

    const ctrlTables = <FormArray> this.appForm.controls.tables;

    this.tableData.forEach(tableObj=>{
      ctrlTables.push(this.initTable(tableObj));
    })
  }

  initTable(table: Array<Person>): any {
    let tempTable = new FormArray([]);
    table.forEach((row, index) => {
      tempTable.push(this.fb.group({
        name: row.name,
        age: new FormControl({ value: row.age, disabled: row.ageEditable }, Validators.compose(
          [Validators.required])),
      }));
    });
    return tempTable;
  }

app.component.html

<div [formGroup]="appForm">
    <div formArrayName="tables" class="flex-container" *ngIf="tableData && tableData.length > 0;else errorContent">

        <div [formGroupName]="tableIndex" *ngFor="let table of appForm.get('tables').controls; let tableIndex = index">
            <div>{{table}} - {{table.value.length}}</div>
            <div *ngIf="table && table.value.length > 0">
                <p-table name="tableIndex]" [columns]="tableHeader" [value]="table.value">
                    <ng-template pTemplate="header" let-columns>
                        <tr>
                            <th class="th-prod-name" colspan="4">
                                <div>Table - {{tableIndex}}</div>
                            </th>
                        </tr>
                        <tr>
                            <th *ngFor="let col of columns; let index=index;">
                                <div class="table-header">
                                    {{col.headerDisplayName}}
                                </div>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
                        <tr [formGroupName]="rowIndex">
                            <td>{{rowData.name}}</td>
                            <td>
                                <p-inputMask formControlName="age" mask="?99"></p-inputMask>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
        </div>
    </div>
</div>

I'm able to edit the text box/p-input mask with normal table but couldn't able to edit using prime ng table approach.

Here's stackblitz Editor URL: https://stackblitz.com/edit/primeng-tables-tc5kpq

Can you help me on this.

Appreciate your help!!!

Removing the [formGroupName]="rowIndex" from the body template makes the fields editable. — Amit
Thanks for your response. I have tried the but it's throwing error ERROR Error: Cannot find control with path: 'tables -> 0 -> age' — user2932411

Herbert Herbert · Accepted Answer · 2019-03-06T13:25:09

The problem is that you are looping over the tableData (which is a Person[][]). So where you think you are in the context of a FormGroup, you are not.

You are not addressing the formGroup (i.e. let table of appForm.get('tables').controls are the FormArrays that contain the FormGroup (for each Person)). And since you are not adressing the formGroup formControlName has no meaning.

Angular PrimeNg (p-table) Nested Tables - Reactive Driven Form Validation

1 Answers