Angular 34: FormArray — Campos de Formulario Dinámicos
easy⏱ 5 mincourseangular
FormArray: una lista ordenada de controles, no un conjunto fijo de claves
Mientras que FormGroup necesita conocer de antemano el nombre de cada campo, FormArray simplemente contiene controles en una lista numerada — perfecto para interfaces de 'agregar otro': una lista de números de teléfono, tareas, o líneas de factura cuya cantidad no se conoce hasta que el usuario decide.
phones = new FormArray([
new FormControl(''),
]);
// or, via FormBuilder:
form = this.fb.group({
phones: this.fb.array([this.fb.control('')]),
});
push() y removeAt(): haciendo crecer y reducir la lista
phones.push(new FormControl('')) agrega un control nuevo al final del arreglo; phones.removeAt(i) elimina el control en el índice i. Ambos mutan el FormArray en el lugar y actualizan inmediatamente .controls, .value, y la validez propia del arreglo.
addPhone() {
this.phones.push(new FormControl(''));
}
removePhone(index: number) {
this.phones.removeAt(index);
}
Recorriendo .controls con @for, indexando formControlName
Dentro de un [formArrayName]="phones" (o un getter que expone el arreglo), @for (phone of phones.controls; track $index) renderiza una fila por control; como las entradas no tienen una clave natural, $index sirve tanto como expresión de track como para el binding [formControlName]="$index".