separate each row by using standalone not working

Question

I have a simple grid just for users to type comments, the grid will have multiple rows, however, when user type in row one, all the row are typed together. I added ngmodeloptions standalone is true. However, ngModelOptions seems not working at all html file

<kendo-grid [pageable]="true" [kendoGridBinding]="commentsGrid">
   <kendo-grid-column field="comment" title="comment" width="80">
     <ng-template kendoGridCellTemplate let-dataItem = "dataItem" let-isNew="isNew" let-column = "column" let-rowIndex="rowIndex" let-formGroup="formGroup">
       <input type="text" name="comments" [(ngModel)]="dataItem.comments" [ngModelOptions]="{standalone: true}" >
     </ng-template>
   </kendo-grid-column>
</kendo-grid]

ts file

commentsGrid = [{
 "comment": null
},
{
 "comment": null
}]

so when I type on row two, both row one and row two start typing together, is there anyway can type each row separately?

Answer 1

Because all input tag of you has same name attribute. You can generate the name of input tag with your rowIndex variable to each input tag has 1 unique name like:

name="comments_{{ rowIndex  }}"

Hope this help!