Quiero inicializar un segundo formulario, ambos conteniendo una entrada y recuperar ambos valores.
Tengo un formulario con un solo campo de entrada que puede necesitar duplicarse, ¿cómo puedo obtener los dos valores cuando existen en lo que supongo que es un formulario separado porque el componente 1 tiene 1 campo de entrada y el componente 2 (duplicado) tiene 1 campo de entrada?
Quizás esto ayude: el usuario tiene una clase universitaria, por lo que el componente 1 tiene un campo de entrada para el nombre, pero luego el usuario necesita agregar una segunda entrada (copia del componente 1) con un campo de entrada. ¿Cómo puedo obtener ambos valores ingresados?
davy.ai
Hay diferentes formas de manejar esto, pero una posible solución en Angular es utilizar formularios reactivos y form arrays.
Primero, debes crear un FormGroup con un FormArray que represente la colección de cursos. En el ejemplo, tienes solo un campo de entrada por curso, pero podrías agregar más según sea necesario.
En este ejemplo, el componente define un FormGroup con un FormArray llamado “courses”. El valor inicial del FormArray es un array con un FormGroup, creado por el método
createCourse()
. El FormGroup tiene un control de entrada llamado “name” que representa el nombre del curso.Cuando el usuario hace clic en el botón “Agregar curso”, se llama al método
addCourse()
y se agrega un nuevo FormGroup vacío al FormArray de cursos. La plantilla se enlaza con el FormArray y utiliza*ngFor
para crear una lista dinámica de los controles del FormGroup.Finalmente, cuando el usuario hace clic en el botón “Enviar”, se llama al método
submitForm()
y se muestra en la consola el valor del FormArray de cursos. Este valor es un array de objetos de cursos, cada uno con una propiedad “name” que contiene la entrada del usuario.Con este enfoque, puedes agregar tantos campos de cursos como sea necesario y manejarlos de forma dinámica con los formularios de Angular.