0

Muy buenas a todos. Los pongo en situación. Tengo un formulario reactivo de angular, donde únicamente hay tres campos a llenar, una fecha de inicio, una fecha fin, y un porcentaje. El problema es que el usuario debería completar ese formulario tantas veces como subcategorías haya seleccionado. Adjunto una foto para un mejor entendimiento.

introducir la descripción de la imagen aquí

En definitiva, debo poder repetir ese formulario reactivo de Angular tantas veces como elementos haya en mi array de subcategoriasSeleccionadas. Es esto posible?

Muchas gracias. Saludos!

3
  • Y por qué no conviertes ese formulario en un componente y lo creas con un ngFor directamente?? Sería lo más fácil
    – Benito-B
    el 2 dic. 2020 a las 13:09
  • Entiendo, pero mi idea seria que se muestre de a un formulario a la vez.. seria, una vez terminado de completar uno, al apretar el boton, pasar al que sigue.. no se si me explico. el 2 dic. 2020 a las 14:31
  • Entonces te sería más fácil usar el mismo formulario, simplemente recoger los valores, guardarlos en un array y limpiar el formulario para que se inserten los siguientes datos
    – Benito-B
    el 2 dic. 2020 a las 17:13

1 respuesta 1

0

Esto es posible usando FormArray.

Ejemplo:

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  fb: FormBuilder;

  constructor(private fb: FormBuilder) {
     this.fb = fb;
  }
  
 ngOnInit(): void {

  exampleForm = this.fb.group({
  subCategorias: this.fb.array([
    this.fb.group({
      fechaInicio: [''],
      fechaFin: [''],
      porcentaje: ['']
    })
  ])
 }

Con esto, el formulario exampleForm tiene un FormArray llamado subCategorias al que se le pueden agregar dinámicamente más formularios reactivos.

Deberías añadir el código de tu componente para adecuar esta respuesta a tu necesidad.

De todas formas te recomiendo que leas la documentación de angular https://angular.io/guide/reactive-forms#creating-dynamic-forms

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.