My reactive form contains columns and rows that can be dynamically added. However, when inspecting the form and adding multiple rows, the formControlName attribute repeats for each row.
I am looking for a solution to have incrementing formControlNames for the columns of each row.
For example:
row 1 -> two columns (formControlNames --> 0, 1)
row 2 -> two columns (formControlNames --> 0, 1)
desired outcome:
row 1 -> two columns (formControlNames --> 0, 1)
row 2 -> two columns (formControlNames --> 2, 3)
I have already implemented some workarounds, but the issue persists where the formControlNames are being updated for all rows and the last added formControlName is applied to all rows.
Here is a snippet of the HTML code:
<form [formGroup]="rubricForm">
<table class="table mt-5">
<thead>
<tr>
<th></th>
<th class="tableHeader" scope="col" formArrayName="scoreHeaders" *ngFor="let col of scoreHeaders.controls; let i = index"><input pInputText type="text"
[formControlName]="i"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let col of leftHeaders.controls; let i = index">
<th formArrayName="leftHeaders" scope="row">
<span>
<input pInputText type="text" name="criteria-field" placeholder="Enter Criteria" [formControlName]="i" required />
</span>
</th>
<td formArrayName="cells" *ngFor="let col of cells.controls; let j = index">
<textarea pInputTextarea name="criteria-val" [cols]="30" [rows]="5" [formControlName]="setFormControlName()"></textarea>
</td>
</tr>
</tbody>
</table>
</form>
And this is the corresponding Typescript function:
setFormControlName(): any {
let leftHeaderLen = this.leftHeaders.length;
let scoreHeaderLen = this.scoreHeaders.length;
let result = 0;
if (leftHeaderLen === 1 && scoreHeaderLen === 1) {
result = 0;
return result;
}
else {
result = (leftHeaderLen + scoreHeaderLen) - (leftHeaderLen + 1);
console.log(`inside second loop ${result}`);
return result;
}
}
You can find the complete code in the links provided above. Thank you in advance for your help!