Input filed is not working properly in place of ngFor

0
votes

Values entered by the user inside a given input field shows only one letter. Can anyone please help.

https://stackblitz.com/edit/angular-8kpyxt?file=src%2Fapp%2Fapp.component.html

1
angular
Probably if you use reactive form in this case, issue will resolved. – Pardeep Jain
Please check the forked solution added in answer. hope this will solve your problem – TheParam

1 Answers

4
votes

Use trackBy

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

component.html

<div class="form-group" *ngFor="let Type of type.headings;trackBy: cmpare;let i=index">
<label>Heading{{i+1}}</label>
<input type="text" class="form-control" [name]="'name1_'+i" [(ngModel)]="type.headings[i]">
</div>

component.ts

cmpare(index) {
  return index;
}

Example:https://stackblitz.com/edit/angular-uwfphr Ref:https://angular.io/api/common/NgForOf#change-propagation