Running into an odd issue while creating a simple table of inputs. Pretty new to Angular, hoping it's something simple!
Objective: Create a table of inputs like below.
My current code is generating the table above, but when attempting to type any numbers in, it doesn't let you type any more than one number at a time like it's losing focus after every number is entered.
The code:
- This is part of the object that I'd like to create the table from
FormData = {
grossInputs: {
"Base Pay": {
ytd: null,
lastYear: null,
yearBeforeLast: null
},
Overtime: {
ytd: null,
lastYear: null,
yearBeforeLast: null
},
Commissions: {
ytd: null,
lastYear: null,
yearBeforeLast: null
},
Bonuses: {
ytd: null,
lastYear: null,
yearBeforeLast: null
}
}
}
2. The template
What are {{ name }}'s gross earnings?<br>
<table class="table-data">
<tr>
<th *ngFor="let headers of grossPayHeaders">
{{ headers }} <-- "type", "Year to Date", ...
</th>
</tr>
<tr *ngFor="let row of formData.grossInputs | keyvalue: originalOrder">
{{row.key}}
<td *ngFor="let col of row.value | keyvalue: originalOrder">
<input
type="number"
class="table-cell"
name="{{col.key}}{{row.key}}"
[(ngModel)]="formData.grossInputs[row.key][col.key]"
>
</td>
</tr>
<tr>
Total
<td *ngFor="let totalof grossTotals" style="text-align: right;">
{{ total}}
</td>
</tr>
</table>
- This is something I came accross to maintain the order of my keys, because for whatever reason Angular decided to order it by default. So I was having issues with the data-binding not corresponding to where it was in the table
originalOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
return 0;
}
Lastly, if I don't use "originalOrder" as the compareFn, and instead use null, it works! Everything functions perfectly! Except I get an error in the console stating that the compareFn must be a function or undefined every time I type something in one of the inputs. Conversely, if I don't use any compareFn, and let it default it does the same thing (only lets you type one number at a time), and of course, nothing is bound properly.
Also, there's a very real possibility that this is just not the right answer. Totally open to anything, thanks for any help!
