Form input value in an ngFor generated table

Question

I want to be able to submit a number for any player in the table.

I am generating a table with *ngFor in Angular2.
For each element in that table I add a form with an input field.

How can I submit and include the input value from those forms?

<table>
    <tr>
        <th>Name</th>
        <th>Value</th>
        <th>Bid</th>
    </tr>
    <tr *ngFor="#player of players">
        <td>{{player.name}}</td>
        <td>{{player.value | currency:'GBP':true:'4.0-0'}}</td>
        <td>
            <form role="form" (submit)="onBid($event, player)">
                <input type="number" min={{player.value}} value={{player.value}}>
                <button type="submit">Bid</button>
            </form>
        </td>
    </tr>
</table>

I haven't been able to submit and retrieve the value from the input box.
Doing it for a static form where I can define id="inputname" and #inputname and then add inputname.value to the (submit)="onBid(inputname.value)" works.

I've tried adding id={{player.id}} and #{{player.id}} but don't know how to add it to onBid().

Answer 1

working Demo

<td>
   <form role="form" (submit)="onBid($event, player, name.value)">
      <input type="number" #name  min={{player.value}} value={{player.value}}>
      <button type="submit">Bid</button>
   </form>
</td>

---

onBid(e,player,value) {
   player.inputValue=value; //<-----this will add new property to your existing object with input value.
   console.log(player);
}