Angular losing binding after array update

Question

I have a situation where i need to have a dynamic array, think like a booking form, where people are adding flights to the list but it could be 1 flight or 10 flights. i did up a dummy example where i have been able to replicate the issue, i'm hoping it's me and not an issue with the Angluar. anyway, here it is.

I start with an empty array with a button to add items, those items are bound with a *ngFor (code below) each of the fields below are in that array, the "Name" values i have populated 1-5 by just typing

I then Decide to delete number 3 which is successful

I then decide to add a new one, here is where everything goes wrong. as you can see below, it successfully adds the 5th item again, but the one that should have #5 in it, is now blank.

I then press "Create Array" which just dumps the array to console, and i see the below, the values are still in there, but not bound to the Input for that 1 item.

Ok, Now for the code:

This is my HTML Template file:

<form name="form" #f="ngForm">
Name: <input class="input" type="text" name="Name" [(ngModel)]="model.Name" 
#Name="ngModel" />
Description: <input class="input" type="text" name="Description" 
[(ngModel)]="model.Description" #Description="ngModel" />
<br>

<button (click)="addThought()">New Thought</button>

<div class="Thought" *ngFor="let Thought of myObject.Thoughts;let i=index">
Thought Name:<input name="Name-{{i}}" [(ngModel)]=Thought.Name 
#Thought.Name="ngModel" type="Text" /><br>
Thought Description:<input name="Description-{{i}}" 
[(ngModel)]=Thought.Description #Thought.Description="ngModel" type="Text" 
/> 
<br>
<br>


<button (click)="removeThought(Thought)">Remove Thought</button>
</div>
<button (click)="CreateThought()">Create Arrays</button>
</form>

and this is my component TS file:

export class CreateThoughtComponent implements OnInit {

  model: any = {};
  myObject: customObject = new customObject;

  constructor(private guid: Guid, private staticData: StaticDataService) {

  }

  ngOnInit() {

  }

  CreateThought() {
      console.log(this.myObject);
  }

  addThought() {
    let thought: Thought = new Thought;
    this.myObject.Thoughts.push(thought);
  }

  removeThought(t: Thought) {
    this.myObject.Thoughts = this.myObject.Thoughts.filter(item => item !== 
t);
  }
}

And here is the declaration of the array within an object

export class customObject {
    Name: string;
    Description: string;
    Thoughts: Thought[];
    constructor() {
        this.Thoughts = new Array<Thought>();
    }
}
export class Thought {
    Name: string;
    Description: string;
}

Any help or suggestions would be greatly appreciated.

user6749601 · Accepted Answer · 2018-05-15 04:42:30Z

1

This is a tricky thing about Angular's change detection mechanism. You can solve your problem easily by creating a clone of your object. e.g.

addThought() {
   let thought: Thought = new Thought;
   this.myObject.Thoughts.push(thought);

   // clone the object in order to force Angular to apply changes
   this.myObject = JSON.parse(JSON.stringify(this.myObject));
}

answered May 15, 2018 at 4:42

user6749601

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

1 Comment

Nikerym Over a year ago

I think there was a deeper issue then just the change detection, however your solution does fix the symptom, thanks!

Nikerym · Accepted Answer · 2018-05-15 05:01:51Z

0

I solved it by removing the name="Name-{{i}}" from the input's, and adding [ngModelOptions]="{standalone: true}" instead. at it seemed to be an issue with the dynamic way i was assigning the Name to the input using the "index"

I was able to solve it by randomly generating a guid for each name but that created a mire of other issues as well.

That being said, i have also tested DiabolicWord's solution above and it works, since it's so simple going to mark his as the answer.

answered May 15, 2018 at 5:01

Nikerym

5254 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular losing binding after array update

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related