Can someone please help me what is wrong with this code?
<div *ngFor="let element of list; let index=index">
<mat-form-field>
<input matInput type="string" [(ngModel)]="element" name="element" #field="ngModel">
</mat-form-field>
</div>
I am getting an error
ERROR: Cannot assign the value "$event" to template variable "element". Template variables are read only
I tried below solution
<div *ngFor="let element of list; let index=index">
<mat-form-field>
<input matInput type="string" [(ngModel)]="list[index]" name="element" #field="ngModel">
</mat-form-field>
</div>
This solution works but when I try to edit the input field it takes only one character at a time, for every character I need to click inside the input box and then type
>Solution :
This may not work with the latest version. You need to understand template variables. Angular-understanding template variables
Change the code like below
<div *ngFor="let element of list; let index=index">
<mat-form-field>
<input matInput type="string" [ngModel]="element" (change)="updateElement($event.target.value,index)" name="element" #field="ngModel">
</mat-form-field>
</div>
In .ts file, write update function as
updateElement(value:string,index:number) {
this.list[index] = value;
}