formArray - Cannot find path to array of arrays

Question

My FormGroup has this structure

asyncValidator: null
     controls: Object
       arr: FormArray
       asyncValidator: null
         controls: Array[6]
           0: FormGroup
           asyncValidator: null
           controls: Object
             name: FormControl
             pay: FormControl
             scores: FormArray
             asyncValidator: null
              controls: Array[3]
                0: FormControl
                   ...
                   value: 1
                   ...
                1: FormControl
                2: FormControl
                errors: null
                   ...

What is the proper html syntax to access the FormControl and values of the "scores" FormArray

I've tried many combinations of the html below without success

{{myForm.value | json}}
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div formArrayName="arr" *ngFor="let a of myForm.get('arr').controls; let i = index">
    <div [formGroupName]="i" style="margin-bottom: 10px;">
      <input type="text" name="name" formControlName="name">
      <label for="pay">Pay:</label>
      <input type="text" name="pay" formControlName="pay">
      <div [formArrayName]="scores">
      <div  *ngFor="let _ of scores.controls; let g = index"> 
      <input type="text"  [formControlName]="g">
    </div></div></div></div>
  <button type="submit">Submit</button>
</form>

Name and pay are properly returned.

Error reported is

ERROR
Error: Cannot find control with path: 'arr -> 0 -> '
ERROR
Error: Cannot read properties of undefined (reading 'controls')

Siddhant · Accepted Answer · 2022-02-06 17:24:11Z

1

You can try below html:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div formArrayName="arr" *ngFor="let a of arr.controls; let i = index">  <!-- arr getter is called -->
    <div [formGroupName]="i" style="margin-bottom: 10px;">
      <input type="text" name="name" formControlName="name">
      <label for="pay">Pay:</label>
      <input type="text" name="pay" formControlName="pay">
      <div formArrayName="scores"> <!-- Property binding is not required  -->
      <div  *ngFor="let _ of scores(i).controls; let g = index"> <!-- inner FormArray is retrieved based on index -->
      <input type="text"  [formControlName]="g">
    </div></div></div></div>
  <button type="submit">Submit</button>
</form>

and define appropriate getter and method to get hold of the FormArray as:

// returns the outer FormArray
get arr(): FormArray {
  return this.myForm.get('arr') as FormArray;
}

// returns the inner FormArray based on the index 
scores(index: number): FormArray {
  return this.arr.at(index).get('scores') as FormArray;
}

edited Feb 6, 2022 at 17:24

answered Feb 6, 2022 at 17:10

Siddhant

3,2112 gold badges10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eliseo Over a year ago

you can use also this.arr.at(index).get('scores') as FormArray to get the scores array

Siddhant Over a year ago

Thanks @Eliseo, edited the answer as per your comment :)

Clifford Eby Over a year ago

Works perfectly. I could tell that the error report was saying that the scores index was a string, but I couldn't figure out how to get that property name.

Collectives™ on Stack Overflow

formArray - Cannot find path to array of arrays

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related