Angular 2 - Dynamic variables in ngModel

Question

How to use dynamic variables in ngModel?

I am trying to use the code below, but the following error appears:

<div *ngFor="let num of ['1','2','3']; let i=index"> <input id="qtd{{num}}" [(ngModel)]="qtd{{num}}" type="text"/> </div> 

Erro

Unhandled Promise rejection: Template parse errors: Parser Error: Got interpolation ({{}})

Answer 1

Define an array in the component and keep clicking on it.

 export class AppComponent { qtd:any[] = {}; } 

Then update your template like

 <div *ngFor="let num of ['1','2','3']; let i=index"> <input id="qtd{{num}}" [(ngModel)]="qtd[num]" type="text"/> </div> {{ qtd | json}} 

In this, all your dynamic models will be in the qtd array

Plunker

Hope this helps!

Answer 2

Let's say you have the following component

 export class AppComponent { qtd1 = 'qtd1'; qtd2 = 'qtd2'; qtd3 = 'qtd3'; } 

Then your template might look like this:

 <div *ngFor="let num of ['1','2','3']; let i=index"> <input id="qtd{{num}}" [(ngModel)]="this['qtd' + num]" type="text"/> </div> 

Plunger example

Answer 3

We mainly need a dynamic ngModel in case of creating a dynamic text field.

In your TS file

  export class AppComponent { public selectedBranch: any[] = [0]; public selectedShiftNameTime: any[] = [0]; public CustomDates: any[] = [0]; } 

your HTML file (template)

  <table class="table" style="padding: 20px;"> <tr> <td class="col-md-2">Employee Name</td> <td class="col-md-2">Branch</td> <td class="col-md-2">Shift Type</td> <td class="col-md-2">Custom Dates</td> </tr> <tr *ngFor="let emp of Empdata"> <td> <label> {{emp.name}} </label> </td> <td> <select class="form-control rounded-0" id="selectedBranch{{emp.EmployeeInfoId}}" > <option value='0'>--Select--</option> <option *ngFor="let branch of Branchdata" [value]=branch.BranchId> {{branch.BranchName}} </option> </select> </td> <td> <select class="form-control rounded-0" id="selectedShiftNameTime{{emp.EmployeeInfoId}}" > <option value='0'>--Select--</option> <option *ngFor="let shifType of ShiftTypedata" [value]=shifType.ShiftTypeId> {{shifType.ShiftName}} </option> </select> </td> <td> <ng-multiselect-dropdown [placeholder]="'Select Custom Dates'" [data]="dropdownList" id="CustomDates{{emp.EmployeeInfoId}}" [(ngModel)]="CustomDates[emp.EmployeeInfoId]" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)"> </ng-multiselect-dropdown> </td> </tr> <tr> <td colspan="4" > <button type="button" (click)='submit()' >Submit</button> </td> </tr> </table> 

Answer 4

Something like this works fine in my case:

  export class AppComponent { qtd:any[] = {}; } 

In html, I used the index instead of the (num) value:

 <div *ngFor="let num of ['1','2','3']; let i=index"> <input id="qtd[i]" [(ngModel)]="qtd[i]" type="text"/> </div> 

Answer 5

You can also do it this way if you want, if you need an identifier corresponding to the index.

 <div *ngFor="let num of ['1','2','3']; let i=index"> <input [attr.id]="'qtd'+i" type="text"/> </div>