How to solve FormControlName getting repeated for each table row in reactive forms?

Question

I have a reactive form that adds columns and rows. If the form is inspected, and if we add multiple rows the formControlName keeps repeating for each rows.

I want incrementing formControlNames for columns of each rows.

row 1 -> two columns (formControlNames --> 0, 1)

row 2 -> two columns (formControlNames --> 0, 1)

to

row 1 -> two columns (formControlNames --> 0, 1)

row 2 -> two columns (formControlNames --> 2, 3)

---

The current code is added to Stackblitz :

https://stackblitz.com/edit/angular-xmmp95?file=src%2Fapp%2Fapp.component.ts

https://angular-xmmp95.stackblitz.io/

---

I have tried with some work-arounds but the formControlNames are getting updated for all and last added formControlName is coming for all.

HTML code part

<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>

---

Typescript code part

setFormControlName(): any {
    let leftHeaderLen = this.leftHeaders.length;
    let scoreHeaderLen = this.scoreHeaders.length;
    let result = 0;
    if ((leftHeaderLen && scoreHeaderLen) === 1) {
      result = 0
      return result;
    }
    else {
      result = (leftHeaderLen + scoreHeaderLen) - (leftHeaderLen + 1);
      console.log(`inside second loop ${result}`);
      return result;
    }
  }

---

The complete code is added in the link above. Thanks in Advance.

Answer 1

Reactive Forms is Tricky I will add a solution later, But for now I Suggest You to use ngModel instead of ReactiveForms.

Clearly You Need Two Dimension Manipulation

let's Assume The initial State :

top = [];
left = [];
data = [[]];

We need Both Row Or Column Addition Logic :

addColumns() {
    this.top.push('');
    this.data.forEach((row) => {
      row.length < this.top.length ? row.push('') : null;
    });
  }


addRows() {
    this.left.push('');
    this.data.push(new Array(this.top.length).fill(''));
  }

You can find the a working solution here with change detection added also:

https://stackblitz.com/edit/angular-2kgmkh?file=src/app/app.component.html