Angular 4 - Mapping object array to ngModel in template driven from

Question

I am developing an application in template driven approach. Below is my project structure.

parent

parent.component.ts

parent.component.html

child

child.component.ts

child.component.html

child.ts

child.ts:

export class child {
    public childValue: address[];
}

export class address {
    public state: string;
    public city: string;
}

child.component.ts

<div *ngFor="let item of ValueItem; let i=index">
    <label> {{item.name}}</label>
    <input name="city" [(ngModel)]="address[i].state"/>
</div>

When I tried mapping state string of address object to ngModel, I am unable to do and its shows an error "Cannot read property 'state' of undefined". Is that possible to map an object within an object array to ngModel? If so, how can this be done?

What is ValueItem? Probably its length is shorder that address, so address[i] doesn't exist — Vega
– Vega, Commented Oct 10, 2017 at 15:10

Andresson · Accepted Answer · 2017-10-10 15:41:31Z

1

In short, YES! it is possible to map an object within an object array to ngModel.
You provided this template code.

<div *ngFor="let item of ValueItem; let i=index">
   <label> {{item.name}}</label>
   <input name="city" [(ngModel)]="address[i].state"/>
</div>

I am assuming that ValueItem is of type address[] and you have made sure that it contains some data. If so, you should be able to access the data via so:

<div *ngFor="let item of ValueItem">
   <label> {{item.city}}</label>
   <input name="city" [(ngModel)]="item.state"/>
</div>

If we take a look at what is happening. The *ngFor="Let item of ValueItem; allows us to iterate through the array and gives us access to the object through item which is in this case of type address. We know from earlier that address has 2 properties state and city. So to use them we can simply use e.g. item.state.

Hope this helped.

answered Oct 10, 2017 at 15:41

Andresson

1,30710 silver badges15 bronze badges

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

5 Comments

Karthikeyan P Over a year ago

@Anderson - Thanks for your response. But the valueItem is used only for page rendering logic and in no way related to the address state field. What shall I do in this case.

Andresson Over a year ago

Could u show me how u define ValueItem in your .ts file ?

Karthikeyan P Over a year ago

The structure will be like {"valueItem": [{"name": "sam"}, {"name": "tim"}, {"name": "rob"}]}.

Andresson Over a year ago

Okey, now i understand. The reason of error "Cannot read property 'state' of undefined" is most likely cause by index reference miss (Happens if ValueItem.length > address.length). I would seriously consider creating singular array of object containing both name and address properties. Before trying to render it in the view.

Karthikeyan P Over a year ago

Do you mean to say to create value in like this: {"valueItem": [{"name": "sam", "address": {"city": "xxx", "state": "yyy"}, {"name": "tim", "address": {"city": "xxx", "state": "yyy"}}, {"name": "rob", "address": {"city": "xxx", "state": "yyy"}]}. But this is not possible in my case as the ValueItem used for rendering logic cannot be related to the model object. Is there any alternate of doing this ?

Pampapathi · Accepted Answer · 2022-07-14 03:43:43Z

0

In my case, the following code is not worked.

 <form #myform="ngForm">
    <table>
      <tr *ngFor="let staff of staffs">
         <td><input name="name" [(ngModel)]="staff.name">{{staff.name}}</td>
      </tr>
    </table>
   </form>

the below code worked for me.

<form #my2form="ngForm">
   <table>
      <tr *ngFor="let staff of staffs;let i = index">
         <td><input name="staff.{{i}}.name" [(ngModel)]="staff.name">{{staff.name}}</td>
      </tr>
    </table>
</form>

answered Jul 14, 2022 at 3:43

Pampapathi

3474 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular 4 - Mapping object array to ngModel in template driven from

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related