FormArray y campos dinámicos
Añadir y eliminar controles del formulario en tiempo de ejecución
FormArray y campos dinámicos es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Conjuntos dinámicos de campos
Algunos formularios tienen un número variable de campos, como una lista de números de teléfono o de conceptos. FormArray administra una colección ordenada y ampliable de controles.
Crear un FormArray
Un FormArray contiene un array de controles o grupos.
const phones = new FormArray([
new FormControl(''),
new FormControl('')
]);Dentro de un FormGroup
Incluya el array en un grupo principal para que forme parte del valor completo del formulario.
const form = new FormGroup({
name: new FormControl(''),
phones: new FormArray<FormControl<string>>([])
});Añadir controles
Llame a push para añadir dinámicamente un control nuevo al final.
addPhone() {
this.phones.push(new FormControl('', { nonNullable: true }));
}Eliminar controles
Use removeAt(index) para eliminar un control específico.
removePhone(i: number) {
this.phones.removeAt(i);
}Renderizar con @for
Recorra los controles del array en la plantilla y vincule cada uno mediante su índice con formControlName.
<div formArrayName="phones">
@for (ctrl of phones.controls; track $index) {
<input [formControlName]="$index" />
}
</div>La directiva formArrayName
formArrayName vincula un bloque de la plantilla al array, y el formControlName interno usa el índice numérico.
Arrays de grupos
Para elementos más completos, almacene FormGroup en el array; por ejemplo, un contacto con nombre y número.
const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
label: new FormControl(''),
number: new FormControl('')
}));Renderizar elementos de grupo
Use formGroupName con el índice de cada grupo del array.
@for (g of contacts.controls; track $index) {
<div [formGroupName]="$index">
<input formControlName="label" />
<input formControlName="number" />
</div>
}Leer el valor
El valor del array es un array simple y ordenado que refleja los controles actuales.
const list = this.phones.value; // string[]Vaciar el array
clear() elimina todos los controles de una vez, algo práctico al restablecer una sección dinámica.
this.phones.clear();Comprobación rápida
Compruebe su comprensión de FormArray.
Resumen
Ha aprendido que FormArray administra una colección dinámica y ordenada de controles o grupos mediante push, removeAt y clear, y que se renderiza con formArrayName junto con formControlName/formGroupName indexados.
Preguntas frecuentes
¿La lección «FormArray y campos dinámicos» es gratis?
Sí — el texto completo de «FormArray y campos dinámicos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «FormArray y campos dinámicos»?
Añadir y eliminar controles del formulario en tiempo de ejecución Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «FormArray y campos dinámicos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Formularios reactivos con tipado
- FormArray y campos dinámicos
- Validadores asíncronos
- Patrones de FormBuilder