Angular 9 Reactive Forms: checkbox not getting updated when using trackBy

Question

I am building the Products form using reactive forms .

When I select all the checkboxes and click reset, the checkboxes are not getting updated**

When I remove trackBy it is working fine, how can I make this work using ngFor trackBy ?

here is the example : stackblitz Products Form

Answer 1

It is because you are returning index in trackBy function, the first argument of trackBy function is index of the item and second is the item itself you suppose to return the second argument.

In your example it would look like something.

PS I renamed trackBy function with a generic name.

 trackByFn(_, item){
  return item;
 }

I forked your stackblitz you can check that out as well.

Answer 2

It's because your trackByFn function is not correct.

The trackBy function takes the index and the current item as arguments and needs to return the unique identifier for this item.

So, try this:

trackByFn(index, item){
  return index;
}

You can check the bug fixed version here on Stackblitz .