Angular2 Nested formGroups - formArrays y template Binding
Aquí está el problema:
Tengo una forma compleja con grupos de formularios anidados, aquí hay una estructura "simplificada" de cómo se ve:
-> MyForm (formGroup)
-> Whatever01 (formControl - input)
-> Whatever02 (formControl - input)
-> WhateverGroup01 (formGroup)
-> Whatever03 (formControl - input)
-> Whatever04 (formControl - input)
-> WhateverArray01 (formArray)
-> WhateverGroup02 (formGroup)
-> Whatever05 (formControl - input)
-> WhateverGroup03 (formGroup)
-> Whatever06 (formControl - input)
-> WhateverGroup04 (formGroup)
-> Whatever07 (formControl - input)
-> ...
Lado angular, debería verse de alguna manera así (no correcto / completo, pero solo para dar una idea):
this.myForm = this.fb.group({
whatever01: ['',Validators.compose([...])],
whatever02: ['',Validators.compose([...])],
whateverGroup01: this._formBuilder.group({
whatever03: ['',Validators.compose([...])],
whatever04: ['',Validators.compose([...])]
}),
whateverArray01: this._formBuilder.array([
this._formBuilder.group({
whatever05: ['',Validators.compose([...])],
whateverGroup03: this._formBuilder.group({
whatever06: ['',Validators.compose([...])]
})
}),
this._formBuilder.group({
whatever07: ['',Validators.compose([...])],
})
])
...
});
Las cosas van bastante bien desde el elemento raíz de myForm a buscar el formArray, pero luego vienen los problemas ...
Por lo tanto, no puedo acceder a "whatever05" (y 06 pero 05 NO funciona ... así que ...) formControl para vincularlo a la plantilla. Así es como se ve realmente la plantilla (intencionalmente omitió la parte anterior a la matriz), la parte interesante es [????] = "????", este es el problema en realidad.
<form [formGroup]="myForm" ...>
<!-- ...skipped... -->
<div formArrayName="whateverArray01" *ngFor="let item of myForm.controls.whateverGroup01.controls.whateverArray01.controls;let idx = index;" [formGroupName]="idx">
<div [????]="????">
<input formControlName="whatever05" ... />
<div [????]="????">
<input formControlName="whatever06" ... />
</div>
</div>
</div>
</form>
Los formGroups ubicados en formArray tienen la misma estructura.
Básicamente, el problema es que NO puedo acceder a los controles de formulario dentro de los grupos de formulario ...
Intenté varias soluciones, usé [formGroupName], formGroupName (sin corchetes), [formGroup], formControlName, ... ¡Pero no puedo entender lo que tengo que usar para poder vincular el formGroup / formControl correspondiente con los datos!
Llego a este tipo de errores por ahora:
formGroup expects a FormGroup instance. Please pass one in.
// This when using [formGroup]="item.whateverGroup02"
Cannot find control with name: 'whatever05'
// When using [formGroup]="item.controls.whateverGroup02"
Cannot find control with path: 'whateverArray01 -> 0 ->'
// This when using [formGroupName]="whateverGroup02"
Gracias por leer / ayuda
Aquí hay un plunker con algo de código: