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 ({{}})

Use an array, and use `qtd[num]`. – JB Nizet Dec 17 '16 at 13:55 — JB Nizet, Dec 17 '16 at 13:55
Could you give an example? – rafaelcb21 Dec 17 '16 at 14:02 — rafaelcb21, Dec 17 '16 at 14:02

Ashok Shah · Accepted Answer · 2016-12-18T04:00:04.387

31

Define array in component and keep pushing in 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 qtd array

Plunker

Hope that helps!

edited Dec 18 '16 at 04:00

answered Dec 18 '16 at 03:48

Ashok Shah

956
12
39

it works very well! Thank you! I've been looking for the right answer for a few hours! Thanks! :) – Emanuela Colta Aug 16 '17 at 11:04
8

i got bug when i used `{}`. so i used `qtd:any[] = [];` – suhailvs Aug 03 '18 at 09:24
is there a possibility to get typesafety on this? – bersling Nov 08 '18 at 13:47
I found what I was looking for here https://stackoverflow.com/questions/33547583/safe-way-to-extract-property-names . Something like `nameof("myProperty")` . – bersling Nov 08 '18 at 13:58
I can add dynamic model value but i can't change that dynamic value. do you have any idea? – Khurshid Ansari Apr 07 '19 at 08:39
@KhurshidAnsari, will you show your code so we know what exactly you meant – Ashok Shah Apr 08 '19 at 09:36
@AshokShah I got answer https://stackoverflow.com/questions/55558029/ionic3-how-to-update-value-of-dynamic-ngmodel?noredirect=1#comment97818498_55558029 – Khurshid Ansari Apr 08 '19 at 09:59

yurzui · Answer 2 · 2017-09-09T10:02:05.257

13

Let's say you have the following component

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

Then your template might look like:

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

Plunker Example

edited Sep 09 '17 at 10:02

answered Dec 17 '16 at 14:23

yurzui

205,937
32
433
399

Thanks yurzui.It is useful for me.can i use pipe with this "this['qtd' + num]" dynamic variable .if means pls help me – kamalav Jun 14 '18 at 07:50
@kamalav Check this https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular/39643180#39643180 – yurzui Jun 14 '18 at 07:53
I used pipes in normal variable.But here(in dynamic variable) it gives error.thats y I am asking u – kamalav Jun 14 '18 at 07:59
Template parse errors: Parser Error: Missing expected ] at column 55 in [let abstract of this[res.Id | replaceSpecialChar +'string']; – kamalav Jun 14 '18 at 08:01
@kamalav Can you reproduce it on stackblitz.com? – yurzui Jun 14 '18 at 08:10

score 2 · Answer 3 · answered Dec 20 '18 at 13:28

2

You can also do it this way if you want, in case you want an id matching the index.

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

answered Dec 20 '18 at 13:28

Mulperi

1,450
1
14
24

score 0 · Answer 4 · answered Dec 20 '18 at 13:22

Something like this works fine in my case:

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

In html i used index instead of value (num):

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

score -1 · Answer 5 · answered Oct 11 '18 at 06:38

We would mostly need dynamic ngModel in the case of dynamic text box creation.

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>

Angular 2 - Dynamic Variables in ngModel

5 Answers5

Linked