Angular dynamic nested key ngModel

Question

How to use dynamic key in ngModel? I am using the primeNg library and i'm trying to bind a dynamic key to the ngModel

this is the html template

<p-table [columns]="cols" [value]="data">
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        <input type="text" pInputText [(ngModel)]="rowData[col.field]"/>
      </td>
    </tr>
  </ng-template>
</p-table>

this is the "cols" variable

cols = [
      { field: 'variables.code', header: 'Code' },
      { field: 'variables.name', header: 'Name' },
];

and this is an example of data

[{
  "variables": {
     "code": "D44D5",
     "name": "keyboard"
  }
}]

Pankaj Parkar · Accepted Answer · 2022-07-26T05:41:38.980

1

You can do something like below, where you can split col.field.split('.') as fieldName and then form ngModel like this rowData[fieldName[0]][fieldName[1]].

<div *ngFor="let rowData of rows;">
  <div *ngFor="let col of columns;">
    <ng-container *ngIf="getValue(rowData, col.field) as fieldName">
      <input type="text" [(ngModel)]="fieldName" />
    </ng-container>
  </div>
</div>

TS

getValue(rowData, fieldPath) {
    const fieldName = fieldPath
      .replace(/[\[\]']+/g,'.')
      .split('.')
      .filter(i => i);
    console.log(fieldName);
    const field = fieldName.reduce((acc, f) => acc[f], rowData)
    return field;
}

Stackblitz

Note:- Above would work for both the usecases, when object has nested structure.

edited Jul 26 '22 at 05:41

answered Jul 25 '22 at 15:30

Pankaj Parkar

134,766
23
234
299

1

The real problem is that col.field has more nested keys – Mitinoh Jul 25 '22 at 21:55
Noted, let me check, whether this solution can be extended. – Pankaj Parkar Jul 25 '22 at 22:00
@Mitinoh can there be an array inside a row value, form example `variables.code[0].somethingElse`? – Pankaj Parkar Jul 25 '22 at 22:44
@Mitinoh updated answer, please have a look – Pankaj Parkar Jul 25 '22 at 23:10
Yeah there can be an array inside a row value – Mitinoh Jul 26 '22 at 04:48
@Mitinoh check updated answer, added nested object access support – Pankaj Parkar Jul 26 '22 at 05:41
I'm getting this error ` Cannot use variable 'fieldName' as the left-hand side of an assignment expression. Template variables are read-only. ` – Mitinoh Jul 26 '22 at 06:07
I tried your solution posted on stackblitz, but unfortunatly the ngModel is not working, casue if you add {{ rows[0].variables.name }} in the template, it's not updating – Mitinoh Jul 26 '22 at 06:19
@Mitinoh you can use `getValue(rowData, col.field)` function when printing value as well. Unsure what exactly you're doing – Pankaj Parkar Jul 26 '22 at 06:40
Parker, this is what i'm trying to do https://stackblitz.com/edit/angular-otzjnt?file=src/app/app.component.html, what about the ` Cannot use variable 'fieldName' as the left-hand side of an assignment expression. Template variables are read-only. ` – Mitinoh Jul 26 '22 at 06:51
Sorry don't completely understand, what you mean here? – Pankaj Parkar Jul 26 '22 at 06:52
When i change the value inside the input i was expecting to see it also change outside at line 9. – Mitinoh Jul 26 '22 at 06:56
I got you, thanks for explaining – Pankaj Parkar Jul 26 '22 at 07:03
Thank tou for the patience. – Mitinoh Jul 26 '22 at 07:08
how about [this one](https://stackblitz.com/edit/angular-dgxecw) – Pankaj Parkar Jul 26 '22 at 07:53

Angular dynamic nested key ngModel

1 Answers1