Angular loses binding in FormControl inside a virtual scroll

Question

I am using a Virtual Scroll component with a lot of input fields with an Form, but after I scrolled a bit my binding is broken. The values gets written to incorrect elements.

<form [formGroup]="animalForm" >
 
  <div *cdkVirtualFor="let animal of animalArray; >

    <input [id]="animal.Id"  cdkFocusInitial matInput type="text"  [formControlName]="animal.Id" />

  </cdk-virtual-scroll-viewport>
</form>

Everything works correctly, but after the scrolling the ValueChange Listener get values for incorrect Ids (incorrect animals)

Answer 1

I just to make a stackblitz and you're correct, the binding is wrong using formControlName :(.... but you can try use formControl :)

<input [id]="animal.Id"  cdkFocusInitial matInput type="text"  
    [formControl]="form.get(animal.Id)" />

See this fool stackblitz -In the stackblitz I don't use matInput, it's the reason I'm not sure 100% that work-