Cómo usar formas reactivas en un componente dinámico
AntecedentesRecibo datos generados por el cliente desde el servidor que contiene HTML que luego uso para crear un componente dinámico que se inyecta y se muestra en nuestro cliente.El HTML que recibo puede contener una o varias entradas a las que necesito vincularme a través de formularios reactivos angulares.Intento 1:Intenté abordar este requisito simplemente usando el
[innerHTML] propiedad y creación de formularios reactivos dinámicos para enlazar a las entradas. Sin embargo, ese método falla debido a limitaciones técnicas del uso de la propiedad innerHTML.Una vez que el HTML se representa en el navegador, todas las propiedades se ven obligadas a escribir en minúsculas, por lo que las directivas o propiedades angulares fallan. Como*ngIf, *ngFor, [formGroup], formControlName, etc ... Angular usa camelCase para casi todo y, por lo tanto, una vez que se ve obligado a escribir en minúsculas, todo se ignora y este método ya no es una solución viable.Intento 2:Esta vez intenté utilizar Angulars NgTemplateOutlet para agregar dinámicamente el HTML al componente y luego crear y vincular a un formulario reactivo.Al principio, esto parecía una gran solución, pero en última instancia, para que el html se procese requiere el uso de[innerHTML] propiedad, una vez más haciendo que este método sea inútil (como se describe en mi primer intento).Intento 3:Por fin descubrí los componentes dinámicos y esta solución está funcionando parcialmente. Ahora puedo crear con éxito una plantilla HTML angular bien formada que se representa correctamente en el navegador. Sin embargo, esto solo resuelve la mitad de mi requerimiento.En este punto, el HTML se muestra como se esperaba, pero no he podido crear un formulario reactivo y vincularlo a las entradas.El problemaAhora tengo un componente dinámico que genera HTML que contiene entradas a las que necesito vincular creando una forma reactiva.Intento 4:Este intento coloqué toda la lógica para crear la Forma Reactiva dentro del Componente Dinámico que se crea.Al utilizar este método, se muestran los componentes dinámicos HTML, pero aparece un nuevo error: "ERROR Error: formGroup espera una instancia de FormGroup. Por favor, pase uno".