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"
}
}]
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;
}
Note:- Above would work for both the usecases, when object has nested structure.