Solución:
Recomendaría me gusta en lugar de usar,
<input [formControl]="myForm.controls[fgn].controls['name']">
usar,
<form [formGroup]="myForm">
<div [formGroup]="myForm.controls[fgn]">
<input [formControlName]="'name'">
</div>
</form>
La razón es que si tiene n campos de entrada, por ejemplo, más de 25 campos en un formulario, no es una buena práctica aplicar [formControl]="myForm.controls[fgn].controls['name']" tipo de declaración en cada campo, ya que esto llevará más tiempo y parece una pesadilla si desea modificar cualquier cambio simple.
En cambio, si usa [formGroup]="myForm.controls[fgn]", se ocupará del interior [formControlName] por sí mismo. Y esto funciona bien ya que lo estoy usando en mi proyecto.
Gracias a @Amit por iniciar esta idea en mí.
Espero que esto ayude. Feliz codificación optimizada 🙂
No estoy seguro de por qué no funcionó con el formControlName Acercarse.
Sin embargo, esto parece funcionar:
<input [formControl]="myForm.controls[fgn].controls['name']">
ACTUALIZAR:
Puede usar esta solución para AOT:
<input [formControl]="myForm.get(fgn + '.name')" />
(Esto se considera una solución alternativa ya que invoca la get método con demasiada frecuencia)
Lo estabas haciendo mal. El código correcto será:
<form [formGroup]="myForm">
<div>
<input [formControl]="myForm.controls['zero'].controls['name']">
{{myForm.controls['zero'].controls['name'].value}}
</div>
</form>
<button (click)="formChange()" >Change</button>
{{fgn}}
<br>
{{myForm.value | json}}
Explicación
formControlName espera el nombre del control de formulario pero lo estaba usando de manera incorrecta => [formControlName]. Cuando está pasando un objeto de control de formulario en lugar del nombre del control de formulario, entonces usa [formControl]. Espero que esto ayude