0

I use ngFor to create inputs, then when I type in a value, both the current and the latter input get the typed in value.

<div *ngFor="let val of selectionValues; index as valIndex">
  <input matInput [(ngModel)]="selectionValues[valIndex]" />
  <button mat-button color="primary" (click)="removeSelectionValue(valIndex)">remove</button>
</div>

The expected input values are:

(1) (blank) (blank)

then

(1) (2) (blank)

but this is what I get when I type in:

(1) (1) (blank)

then

(1) (2) (2)

Later I observed that the input loses focus when I type in.

aliep
  • 1,702
  • 2
  • 21
  • 33

2 Answers2

2

So I had to use trackBy in ngFor

Ref URL: https://stackoverflow.com/a/50139592/1922314

<div *ngFor="let val of selectionValues; index as valIndex; trackBy: trackByFn">
  <input matInput [(ngModel)]="selectionValues[valIndex]" />
  <button mat-button color="primary" (click)="removeSelectionValue(valIndex)">remove</button>
</div>

trackByFn(index, item) {
  return index;
}
SuperStar518
  • 2,814
  • 2
  • 20
  • 35
aliep
  • 1,702
  • 2
  • 21
  • 33
0

Just create a quick working solution on stackblitz. You may want to try it https://stackblitz.com/edit/angular-wztqj3

incase if you are still having the issue, please share the ts based additions you have made

Anish Kutti
  • 337
  • 2
  • 7