Nested FormArray Error: "cannot find control with path:" - html

Question

I am developing an APP Using Angular 9.
But I'm facing a problem with nested formArray.
I'm having the error: "Cannot find control with path: 'arrayProcedimientos -> subprocedimientos'"
The goal of this form is that arrayProcedimientos is an array, and inside that there are subprocedimientos which is an array too.
Below is my code:
HTML:
<form #f="ngForm" [formGroup]="registros" class="fila-contenido">
<!-- A lot of mat-form-field -->
<div formArrayName="arrayProcedimientos"
*ngFor="let procedimientoArr of registros.get('arrayProcedimientos')['controls']; let i = index">
<div [formGroupName]="i">
<!-- Procedimientos ESTO ES UN ARRAY-->
<mat-form-field appearance="">
<mat-label>Procedimientos</mat-label>
<mat-select formControlName="procedimiento">
<mat-option *ngFor="let procedimiento of procedimientos"
[value]="procedimiento">
{{procedimiento}}
</mat-option>
</mat-select>
</mat-form-field>
<!-- Contenido ESTO ES UN ARRAY-->
<mat-form-field>
<mat-label>Fecha Inicio</mat-label>
<input matInput [matDatepicker]="picker8"
formControlName="fechaInicioProcedimiento">
<mat-datepicker-toggle matSuffix [for]="picker8"></mat-datepicker-toggle>
<mat-datepicker #picker8></mat-datepicker>
</mat-form-field>
<!-- Contenido ESTO ES UN ARRAY-->
<mat-form-field>
<mat-label>Fecha Fin</mat-label>
<input matInput [matDatepicker]="picker9" formControlName="fechaFinProcedimiento">
<mat-datepicker-toggle matSuffix [for]="picker9"></mat-datepicker-toggle>
<mat-datepicker #picker9></mat-datepicker>
</mat-form-field>
<!-- Notas -->
<mat-form-field appearance="fill">
<mat-label>Notas</mat-label>
<textarea matInput formControlName="notasProcedimiento"></textarea>
</mat-form-field>
</div>
{{registros.value | json}}
<div formArrayName="subprocedimientos"
*ngFor="let subprocedimiento of procedimientoArr.get('subprocedimientos')['controls']; let j = index">
<div [formGroupName]="j">
{{registros.value | json}}
</div>
</div>
</div>
</form>
TS:
export class AddRegistroComponent implements OnInit {
data = {
procedimientos: [
{
procedimiento: "",
fechaInicioProcedimiento: "",
fechaFinProcedimiento: "",
notasProcedimiento: "",
subprocedimientos: [
{
subprocedimiento: "",
fechaInicioSubprocedimiento: "",
fechaFinSubprocedimiento: "",
fechaLimiteSubprocedimiento: "",
notasSubprocedimiento: ""
}
]
}
]
}
registros: FormGroup;
constructor(public dialog: MatDialog, private service: AddRegistroService, private fbuilder: FormBuilder) {
this.inicializaFormGroup();
}
inicializaFormGroup() {
this.registros = this.fbuilder.group({
arrayProcedimientos: this.fbuilder.array([]),
});
this.setProcedimientos();
}
setProcedimientos() {
let control = <FormArray>this.registros.controls.arrayProcedimientos;
this.data.procedimientos.forEach(x => {
control.push(this.fbuilder.group({
procedimiento: x.procedimiento,
fechaInicioProcedimiento: x.fechaInicioProcedimiento,
fechaFinProcedimiento: x.fechaFinProcedimiento,
notasProcedimiento: x.notasProcedimiento,
subprocedimientos: this.setSubProcedimientos(x)
}))
})
}
setSubProcedimientos(x) {
let arr = new FormArray([])
x.subprocedimientos.forEach(y => {
arr.push(this.fbuilder.group({
subprocedimiento: y.subprocedimiento,
fechaInicioSubprocedimiento: y.fechaInicioSubprocedimiento,
fechaFinSubprocedimiento: y.fechaFinSubprocedimiento,
fechaLimiteSubprocedimiento: y.fechaLimiteSubprocedimiento,
notasSubprocedimiento: y.notasSubprocedimiento
}))
})
return arr;
}
}
My solution is based on an stackblitz that a mate from StackOverflow made, here is the link of his solution:
https://stackblitz.com/edit/angular-dffny7?file=app%2Fapp.component.html
Thanks for your time.
Alberto.