Property 'Rows' comes from an index signature, so it must be accessed with ['Rows']

Question

I am trying to formarray but i m getting error like Property 'Rows' comes from an index signature, so it must be accessed with ['Rows'].

*ngFor="let itemrow of invoiceForm.controls.Rows.controls"

Html File

<form [formGroup]="invoiceForm">
    <table border=1>
        <thead>
            <th>Id</th>
            <th>Name</th>
            <th>Action</th>
        </thead>
        <tbody formArrayName="Rows">
            <tr *ngFor="let itemrow of invoiceForm.controls.Rows.controls; let i=index;let l=last"
                [formGroupName]="i">
                <td>{{i+1}}</td>
                <td>
                <mat-form-field  appearance="fill">
                <mat-label>Input</mat-label>
                <input matInput formControlName="name" class="form-control">
            </mat-form-field>
        </td>
                <td>
                    <button *ngIf="invoiceForm.controls.Rows.controls.length > 1" (click)="deleteRow(i)" class="btn btn-danger">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>
<button type="button" (click)="addNewRow()" class="btn btn-primary">Add new Row</button>
<br/>
<br/>

TS FILE

  public invoiceForm!: FormGroup;
  constructor(private _fb: FormBuilder) {}
  ngOnInit() {
    this.invoiceForm = this._fb.group({
      Rows: this._fb.array([this.initRows()])
    });
  }

  get formArr() {
    return this.invoiceForm.get("Rows") as FormArray;
  }

  initRows() {
    return this._fb.group({
      name: [""]
    });
  }

  addNewRow() {
    this.formArr.push(this.initRows());
  }

  deleteRow(index: number) {
    this.formArr.removeAt(index);
  }

Answer 1

Since you implemented the getter for formArr FormArray,

get formArr() {
  return this.invoiceForm.get("Rows") as FormArray;
}

You can reuse the getter as below (in HTML):

<tr *ngFor="let itemrow of formArr.controls; let i=index;let l=last"
                [formGroupName]="i">
  ...
</tr>

<button *ngIf="formArr.controls.length > 1" (click)="deleteRow(i)" class="btn btn-danger">Delete</button>