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
– JB Nizet

2016-12-17 13:55:19 +00:00
Commented Dec 17, 2016 at 13:55 — JB Nizet
– JB Nizet, Commented Dec 17, 2016 at 13:55
Could you give an example?

rafaelcb21
– rafaelcb21

2016-12-17 14:02:36 +00:00
Commented Dec 17, 2016 at 14:02 — rafaelcb21
– rafaelcb21, Commented Dec 17, 2016 at 14:02

Ashok Shah · Accepted Answer · 2016-12-18 04:00:04Z

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, 2016 at 4:00

answered Dec 18, 2016 at 3:48

Ashok Shah

95614 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Emanuela Colta Over a year ago

it works very well! Thank you! I've been looking for the right answer for a few hours! Thanks! :)

suhailvs Over a year ago

i got bug when i used {}. so i used qtd:any[] = [];

bersling Over a year ago

is there a possibility to get typesafety on this?

bersling Over a year ago

I found what I was looking for here stackoverflow.com/questions/33547583/… . Something like nameof<MyThing>("myProperty") .

Khurshid Ansari Over a year ago

I can add dynamic model value but i can't change that dynamic value. do you have any idea?

|

yurzui · Accepted Answer · 2017-09-09 10:02:05Z

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 9, 2017 at 10:02

answered Dec 17, 2016 at 14:23

yurzui

215k32 gold badges450 silver badges413 bronze badges

5 Comments

kamalav Over a year ago

Thanks yurzui.It is useful for me.can i use pipe with this "this['qtd' + num]" dynamic variable .if means pls help me

yurzui Over a year ago

@kamalav Check this stackoverflow.com/questions/39642882/…

kamalav Over a year ago

I used pipes in normal variable.But here(in dynamic variable) it gives error.thats y I am asking u

kamalav Over a year ago

Template parse errors: Parser Error: Missing expected ] at column 55 in [let abstract of this[res.Id | replaceSpecialChar +'string'];

yurzui Over a year ago

@kamalav Can you reproduce it on stackblitz.com?

Mulperi · Accepted Answer · 2018-12-20 13:28:54Z

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, 2018 at 13:28

Mulperi

1,4512 gold badges15 silver badges25 bronze badges

Comments

K. Gol · Accepted Answer · 2018-12-20 13:22:02Z

0

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>

answered Dec 20, 2018 at 13:22

K. Gol

1,66616 silver badges17 bronze badges

Comments

Nikita Somaiya · Accepted Answer · 2018-10-11 06:38:31Z

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>

Collectives™ on Stack Overflow

Angular 2 - Dynamic Variables in ngModel

5 Answers 5

7 Comments

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related