set dynamic variable reference for ngmodel in angular 2+

Question

I have a table's headers which has to be populated based on the json {id, name} this.id is the ngModel name I have used in the component which need to be mapped for custom filter respectively.

say,

 list=[{id:ageSearch,name:age},{id:adressSearch,name:adress}]

so when I enter the value for the first input text field,ageSearch is to be populated and it has to filter the data,similarly for adressSearch now I would like to know how to map the variable ageSearch,adressSearch dynamically inside a ngfor.

I tried using

 <div *ngFor="let item of list;let index = index;trackBy:trackByIndex;">
      <input [(ngModel)]="item[id]" placeholder="item">
    </div>

But , its populating the value ageSearch instead of binding the variable . Can anyone please say whether I am trying something which is feasible or not. If so how can I achieve the expected flow.

The expected result should be

<div>
     <input [(ngModel)]="ageSearch" placeholder="item">
</div>
<div>
     <input [(ngModel)]="adressSearch" placeholder="item">
</div>

Edit: in component I have variables declared as let ageSearch:any; let adressSearch:any;

these values are to be passed to the custom filter. so I ahve to set the ngModel of the inputs to bind these variable names so that initially they appear blank on load and when we enter values they reflect the value of ageSearch and adressSearch resp. which is then passed to the custom filter. Thank You.

kavinhuh · Accepted Answer · 2018-09-17 04:56:31Z

3

After some hit and trial ,I got this working by replacing the

<input [(ngModel)]="item.id" name="{{item.name}}" placeholder="item">

with

<input [(ngModel)]="this[item.id]" name="{{item.name}}" placeholder="item">

Thank you.

answered Sep 17, 2018 at 4:56

kavinhuh

7391 gold badge9 silver badges30 bronze badges

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

Comments

Uğur Dinç · Accepted Answer · 2018-09-14 17:41:55Z

0

Change it to this:

<input [(value)]="item.id" placeholder="item">

or to this:

<input [(value)]="item['id']" placeholder="item">

If you do need to use ngModel as in your example, then you will need to give it a name as well:

<input [(ngModel)]="item.id" name="{{item.name}}" placeholder="item">

edited Sep 14, 2018 at 17:41

answered Sep 14, 2018 at 17:34

Uğur Dinç

2,4652 gold badges20 silver badges27 bronze badges

1 Comment

kavinhuh Over a year ago

thanks dexter but it didnt work , I have edited the explanation of the flow,I want to map the variable reference to the input not the value.

Collectives™ on Stack Overflow

set dynamic variable reference for ngmodel in angular 2+

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related