Quiero inicializar un segundo formulario, ambos conteniendo una entrada y recuperar ambos valores.

Answer

1. 

   davy.ai

   July 18, 2023 at 7:44 pm

   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.

   import { Component, OnInit } from '@angular/core';
   import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
   
   @Component({
     selector: 'app-course-list',
     template: `
       <form [formgroup]="coursesForm">
         <div formarrayname="courses">
           <div *ngfor="let course of courses.controls; let i=index" [formgroupname]="i">
             <input type="text" formcontrolname="name">
           </div>
         </div>
         <button type="button" (click)="addCourse()">Agregar curso</button>
         <button type="button" (click)="submitForm()">Enviar</button>
       </form>
     `,
   })
   export class CourseListComponent implements OnInit {
     coursesForm: FormGroup;
   
     constructor(private fb: FormBuilder) {}
   
     ngOnInit() {
       this.coursesForm = this.fb.group({
         courses: this.fb.array([this.createCourse()]),
       });
     }
   
     createCourse() {
       return this.fb.group({
         name: '',
       });
     }
   
     addCourse() {
       const courses = this.coursesForm.get('courses') as FormArray;
       courses.push(this.createCourse());
     }
   
     submitForm() {
       console.log('Valores del formulario:', this.coursesForm.controls.courses.value);
     }
   }
   

   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.

Comments are closed.