2

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?

Charlie
  • 22,886
  • 11
  • 59
  • 90
pietro
  • 51
  • 8

2 Answers2

0

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

Aviad P.
  • 32,036
  • 14
  • 103
  • 124
  • great!thanks, but i have two questions now:1:i'm working with a realtional db(postgresql) how can i pass this multidimentional array and work on it in the server?(i use java, springboot) question 2:somehow now i can't have 0 as default value of the input, value =0 doesn't seem to work anymore, how can i fix it? thanks again – pietro Aug 06 '21 at 10:22
  • I am not familiar with java and springboot, but I presume you can pass it as a `Map>` - regarding the 0 as default, not sure why that happens, try to make a stackblitz for demo – Aviad P. Aug 06 '21 at 11:05
0

Use ng-Model with direct binding to nested array elements.

Template

    <tr *ngFor="let row of FigProfs;  let i = index">
        {{row.nome}}
        <td *ngFor="let column of mesi; let j = index">
            <input  id="gd{{row.id}}_{{column}}" type="number"  [(ngModel)]="inputValues(i, j)" >
        </td>
        
    </tr>

TS

let inputValues = new Array(this.FigProfs.length).fill(new Array(this.mesi.length).fill(0));
Charlie
  • 22,886
  • 11
  • 59
  • 90