How to bind different input text value in each row in a Table using ngModel in Angular

Question

Please developers in the house, I have a table in my angular Application that am populating with a data from database and a row which is an input text field that I need to fill from FrontEnd and binding the Input text field using ngModel to be send to the database. But I observed that if I have three record in the table and I try typing in a value in one of the Input field, the other two input fields automatically get filled with the data am filling in one Input text field which I think is as a result of ngModel. Please how can i bind it so that the input number type in one input field will not be filled in other fields. Below is my code: Thank you for your help.

 <tbody>
                                 <tr *ngFor = "let SelectItem of selectRequisition ; let i = index ">
                                <td style="width: 150px;">{{SelectItem.transactionDate |date}}</td>
                                   <td style="width: 150px;">{{SelectItem.description}} </td>
                                   <td style="width: 150px;"> {{SelectItem.remark}} </td>
                                   <td style="width: 150px;"><input type = "number" ngModel = "InputItem"></td>
                                 </tr>
                                </tbody>

ShayD · Accepted Answer · 2021-03-17 15:41:21Z

1

I think the best approach for you will be to add a property to your model and bind it to your input. For example, with this model:

export interface MyItemModel { 
 transactionDate:number;    
 description:number;    
 remark:string; 
 SomeNumber:number; // <-- Add this property
}

You can bind the SomeNumber property to the input like this:

<input type="number" [(ngModel)]="SelectItem.SomeNumber">

answered Mar 17, 2021 at 15:41

ShayD

82910 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

How to bind different input text value in each row in a Table using ngModel in Angular

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