Angular 12 FormControls in nested formGroup inside of two FormArrays - angular12

Question

I am trying to build dynamic form that has such structure:
Form
-|FormGroup
--|FormArray
---|FormGroup
----|FormControl
----|FormArray
-----|FormGroup
------|FormControl <-- Problem that I cannot bind this form control to input
------|FomrControl <-- Problem that I cannot bind this form control to input
On two specified controls I get error
Cannot find control with path: 'items -> 0 -> properties -> 1'
I just guess that it can be because something wrong with let rowItem of items.controls[i].value.properties; let j=index
Tried a lot of different sceanrious without success. For example:
let rowItem of items.controls[i].properties; let j=index
give
Property 'properties' does not exist on type 'AbstractControl'.
StackBlitz
On StackBlitz it is also not working correct.
I will be grateful for advices on how to connect those FormControl's to inputs.
Html code:
<form [formGroup]="myForm">
<div formArrayName="items">
<div *ngFor="let item of items.controls; let i=index">
<div [formGroupName]="i">
<input formControlName="word" matInput>
<div formArrayName="properties">
<div *ngFor="let rowItem of items.controls[i].value.properties; let j=index">
<div [formGroupName]="j">
<input formControlName="property" matInput>
<input formControlName="value" matInput>
</div>
</div>
<br>
</div>
<button (click)="addWordProperty(items.controls[i].value.properties)">Add property</button>
<br>
</div>
</div>
<button (click)="addWord()">Add word</button>
</div>
</form>
{{ myForm.value | json }}
Type Script Code:
import { Component} from '#angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup } from '#angular/forms';
#Component({
selector: 'app-infinitive',
templateUrl: './infinitive.component.html',
styleUrls: ['./infinitive.component.css']
})
export class InfinitiveComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
items: this.fb.array([
this.fb.group({
word: this.fb.control(''),
properties: this.fb.array([
this.fb.group({
property: this.fb.control(''),
value: this.fb.control('')
})
]),
})
])
})
}
addWordProperty(control: any) {
var items = control as FormArray;
items.push(this.fb.control(''));
}
addWord() {
var array = this.myForm.get('items') as FormArray;
array.push(this.fb.group({
word: this.fb.control(''),
properties: this.fb.array([
this.fb.group({
property: this.fb.control(''),
value: this.fb.control('')
})
]),
}));
}
get items() {
return this.myForm.get('items') as FormArray;
}
}

Answer 1

<form [formGroup]="myForm">
<div formArrayName="items">
<div *ngFor="let item of items.controls; let i=index">
<div [formGroupName]="i">
<input formControlName="word" matInput>
<div formArrayName="properties">
<div *ngFor="let rowItem of items.controls[i].controls['properties'].controls; let j=index">
<div [formGroupName]="j">
<input formControlName="property" matInput>
<input formControlName="value" matInput>
</div>
</div>
<br>
</div>
<button (click)="addWordProperty(items.controls[i].value.properties)">Add property</button>
<br>
</div>
</div>
<button (click)="addWord()">Add word</button>
</div>
</form>