Angular - Deep nested object models are linked

Question

I've a Angular application which displays company & contact person information on a text box as below Company Email address:

   <label> Company Email address</label>
   <input type="text" class="form-control" [(ngModel)]="companyInfo.contactInfo.email" value="{{ companyInfo?.contactInfo?.email }}">

&&& Contact Person Email address:

  <label>Contact Email address</label>
  <input type="email" class="form-control" [(ngModel)]="companyInfo.contactPerson.contactInfo.email" value="{{ companyInfo?.contactPerson?.contactInfo?.email }}">

since this info is obtained from a nested object, when the email address of the company is typed in, it reflects in the contact's email address as well. Anything I'm overlooking as component assignment works fine but when input is typed in, it gets mirrored?

please provide some screenshot what happened to your input field when you typed in. You're question isn't clear. Also. I guess there is no need for the value to be there since whatever value you have in [(ngModel)] that is already your input value — Stacks Queue
– Stacks Queue, Commented Mar 15, 2021 at 6:20
you dont need to provide the original data / screenshot here , rather you can mock up the object and create a dummy one — Ravi Teja Muddada
– Ravi Teja Muddada, Commented Mar 15, 2021 at 7:21

Dharman · Accepted Answer · 2021-03-15 06:43:15Z

0

Hi i got your question it is due to two way binding ngModel is 2-way data binding but it seems the values seems different in this case please check proper names or if possible write your problem in stackblitz.

Or there is another way for it, assign 2 variables in .ts class and reflect the names like this.

   .ts class

    companyEmail: any;
    contactEmail: any;
    this.companyEmail = companyInfo.contactInfo.email;
    this.contactEmail = companyInfo.contactPerson.contactInfo.email;

    .html
<-- For Comapny Email -->
   <input type="text" class="form-control" [(ngModel)]="companyEmail" value="{{ companyEmail }}">

<-- For Contact Email -->

<input type="email" class="form-control" [(ngModel)]="contactEmail" value="{{ contactEmail }}">

edited Mar 15, 2021 at 6:43

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Mar 15, 2021 at 6:37

kishan

732 silver badges7 bronze badges

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

1 Comment

HARI PRASAD Over a year ago

Im using _.deepclone to copy the API data to companyInfo bfr i display it on UI, this.companyinfo = _.deepclone(//API company data) - since i need to maintain a original values to compare and see if any changes are made

Imranmadbar · Accepted Answer · 2021-03-15 06:45:40Z

0

I am not sure about your object structure , However I have designed an object based on my understanding from your question and tried the below example

Stackblitz

But, I didn't see that the second value is getting changed , when i am modifying the first value in UI. Its behavior looks good only (You can check the console to verify - i am printing both the values on change call)

edited Mar 15, 2021 at 6:45

Imranmadbar

5,6004 gold badges22 silver badges40 bronze badges

answered Mar 15, 2021 at 6:38

Ravi Teja Muddada

4016 silver badges20 bronze badges

3 Comments

HARI PRASAD Over a year ago

Im using _.deepclone to copy the API data to companyInfo bfr i display it on UI, this.companyinfo = _.deepclone(//API company data) - since i need to maintain a original values to compare and see if any changes are made P.S : ur stackblitz is working fine & the object structure is same , hence not sure if deepclone is causing the data to be replicated in model ??

Ravi Teja Muddada Over a year ago

can you please post your sample object here ? also , when you are using deep clone , the cloned object and the source object will not have any link b/w them i.e. they are completely independent - So , if you change one object , it should not effect the other object

HARI PRASAD Over a year ago

found the issue, while resetting fields i was using the same reference to contactinfo object for creating new company object newCompany: Company = new Company(companyName, this.contactInfo,new ContactPerson ( lastName, firstName,this.contactInfo)

HARI PRASAD · Accepted Answer · 2021-03-15 07:28:30Z

0

Found the issue to be cause of reference to same object while resetting the fields to create a new company form //while resetting

newCompany: Company = new Company(companyName, this.contactInfo,new ContactPerson ( lastName, firstName,this.contactInfo)

replaced with

newCompany: Company = new Company(companyName, ._cloneDeep(this.contactInfo),new ContactPerson ( lastName, firstName,._cloneDeep(this.contactInfo))

answered Mar 15, 2021 at 7:28

HARI PRASAD

1231 silver badge13 bronze badges

Collectives™ on Stack Overflow

Angular - Deep nested object models are linked

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related