CODEWITHSUNDEEP
angularangular8angular9
ckeedee
ckeedee

Reputation: 137

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

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>

Upvotes: 0

Views: 1752

Answers (1)

ShayD
ShayD

Reputation: 799

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">

Upvotes: 1

Related Questions