ERROR: Cannot assign value "$event" to template variable "element". Template variables are read only

Question

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

y2358 · Accepted Answer · 2023-03-08 10:31:50Z

0

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;
}

answered Mar 8, 2023 at 10:31

y2358

501 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ERROR: Cannot assign value "$event" to template variable "element". Template variables are read only

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related