How can I take the value of an <input> in an *ngfor?

Question

I have a table of variable length and in every cells I have an input(the default value of every input is 0), I need the user to edit the data that he wants, then when he press a button I need to have all the data back and the id of the input (the id is always different), even the ones that still haven't been edited, I'm going to attach the code for better understanding:

<form  #login (ngSubmit)="onSubmit(login.value)" novalidate>
    <table class="rtable">
        <tr>
            <th></th>
            <th *ngFor="let column of mesi">
                {{column}}
            </th>
        </tr>

        <tr *ngFor="let row of FigProfs">
            {{row.nome}}
            <td *ngFor="let column of mesi">
                <input  id="gd{{row.id}}_{{column}}" type="number"  value=0 >
            </td>
            
        </tr>
    </table>
    <button class="btnsubmit" type="submit">AVANTI</button>
</form>

So as you can see the input is always different because is generated using values that changes depending on the values of the ngfor, so my question is: Is there an easy way to have in my ts file an array of all this values?

Answer 1

The straightforward solution, bind ngModel to an object:

<input  id="gd{{row.id}}_{{column}}" type="number"  value=0 [ngModel]="get(row.id,column)" (ngModelChange)="set(row.id,column,$event)">

Your class:

data: any = {};

get(i, j) {
  return this.data[i] && this.data[i][j];
}

set(i, j, v) {
  this.data[i] = this.data[i] || {};
  this.data[i][j] = v;
}

Feel free to set the types properly.

Stackblitz demo