Angular: 41. Formularios. Array de campos en un formulario

Vamos a ver cómo podemos tratar en un formulario un array de campos, por ejemplo una lista de aficiones en la que cada una sea un String diferente y cuyo número pueda variar de persona a persona.

Partiendo de la aplicación anterior, en la que nos creamos un objeto ficticio "usuario" para representar el modelo de datos que tiene el formulario. Vamos a añadir al objeto un campo de tipo Array de Strings llamado pasatiampos:

Así quedaría nuestro modelo de datos. Lo que queremos es añadir al formulario un campo de tipo Array que pueda contener varios campos en su interior.
La idea es que en el formulario aparezca una caja de texto en la que podemos escribir un pasatiempo y a su lado aparezca un botón que nos permita crear más cajas de texto en las que ir añadiendo distintas aficiones cuando le hagamos click.

Lo primero que tenemos que hacer es añadir el array de campos al formulario, y dentro del mismo añadimos el primer campo pasatiempo con el valor por defecto "Correr":

Como se puede ver, hemos utilizado el objeto FormArray (el array de campos), dentro del cual hemos introducido un FormControl normal (el primer campo por defecto con valor "Correr").
También se puede ver que hemos comentado la línea que insertaba el objeto "usuario" en el formulario, ya que para este ejemplo no la queremos.

No hay que olvidarse de importar el FormArray:

Una vez hecho esto, debemos crear en el html el campo de texto y el botón correspondiente:

Como se puede ver, al div que contiene el campo de texto y el botón le hemos agregado el atributo "formArrayName", que sirve para indicar que ése contenedor se corresponde con el array del formulario.
En el campo de texto hemos añadido un NgFor para que se cree uno por cada elemento del array "pasatiampos" del formulario. Cada campo de texto se corresponde con un elemento del array gracias al atributo formControlName, al que le hemos dado el valor de "i", es decir, del índice del array.
Por último, en el botón hemos añadido una función "agregarPasatiempo()", que creamos en el typeScript del componente:

Como se puede ver, en la función lo único que hacemos es crear y añadir un nuevo FormControl al array "pasatiempos" del formulario.
Gracias a la directiva NgFor que pusimos en el campo de texto, cada vez que añadamos un nuevo FormControl al array se creará un nuevo campo de texto en la pantalla.

Arrancamos la aplicación y comprobamos que tiene un campo de texto y un botón en el apartado "Pasatiempos":

Si pulsamos varias veces en el botón, se crean los nuevos campos:

Y eso es todo.