Como usar formulários reativos em um componente dinâmico
fundoEu recebo dados gerados pelo cliente do servidor que contém HTML que eu uso para criar um componente dinâmico que é injetado e exibido em nosso cliente.O HTML que eu recebo pode conter uma ou várias entradas às quais eu preciso vincular através de Formas reativas angulares.Tentativa 1:Tentei atender a esse requisito usando simplesmente o
[innerHTML] propriedade e criação de formulários reativos dinâmicos para vincular às entradas. No entanto, esse método falha devido a limitações técnicas do uso da propriedade innerHTML.Depois que o HTML é renderizado no navegador, todas as propriedades são forçadas a minúsculas, para que quaisquer diretivas ou propriedades angulares falhem. Tal como*ngIf, *ngFor, [formGroup], formControlName, etc ... Angular usa camelCase para praticamente tudo e, portanto, uma vez que é forçado a minúsculas, tudo é ignorado e esse método não é mais uma solução viável.Tentativa 2:Desta vez, tentei utilizar o Angulars NgTemplateOutlet para adicionar dinamicamente o HTML ao componente e, em seguida, criar e vincular a um formulário reativo.A princípio, parecia uma ótima solução, mas, em última análise, para obter o html para renderizá-lo, é necessário o uso de[innerHTML] propriedade, mais uma vez tornando este método inútil (conforme descrito na minha primeira tentativa).Tentativa 3:Por fim, descobri os componentes dinâmicos e esta solução está funcionando parcialmente. Agora, posso criar com êxito um modelo HTML angular bem formado que é renderizado corretamente no navegador. No entanto, isso resolve apenas metade da minha exigência.Nesse ponto, o HTML é exibido conforme o esperado, mas não consegui criar um formulário reativo e vincular as entradas.O problemaAgora eu tenho um componente dinâmico que gera HTML que contém entradas às quais eu preciso vincular, criando um formulário reativo.Tentativa 4:Nesta tentativa, coloquei toda a lógica para criar o formulário reativo dentro do componente dinâmico que é criado.Ao usar esse método, o HTML dos componentes dinâmicos é exibido, mas recebo um novo erro: "Erro de erro: formGroup espera uma instância do FormGroup. Passe uma dentro".