Marco, parte de este gran equipo, nos ha hecho el favor de escribir este post porque domina perfectamente dicho tema.
Solución:
FormArray es una variante de FormGroup. los key diferencia es que sus datos se serializan como un array (a diferencia de ser serializado como un objeto en el caso de FormGroup). Esto puede ser especialmente útil cuando no sabe cuántos controles estarán presentes dentro del grupo, como formularios dinámicos.
Permítanme tratar de explicar con un ejemplo rápido. Supongamos que tiene un formulario en el que captura el pedido de pizza de un cliente. Y coloca un botón para permitirles agregar y eliminar cualquier solicitud especial. Aquí está la parte html del componente:
Any special requests?
-
y aquí está la clase de componente que define y maneja solicitudes especiales:
constructor ()
this.orderForm = new FormGroup(
firstName: new FormControl('Nancy', Validators.minLength(2)),
lastName: new FormControl('Drew'),
specialRequests: new FormArray([
new FormControl(null)
])
);
onSubmitForm ()
console.log(this.orderForm.value);
onAddSpecialRequest ()
this.orderForm.controls
.specialRequests.push(new FormControl(null));
onRemoveSpecialRequest (index)
this.orderForm.controls['specialRequests'].removeAt(index);
FormArray ofrece más flexibilidad que FormGroup en el sentido de que es más fácil manipular FormControls usando “push”, “insert” y “removeAt” que usando “addControl”, “removeControl”, “setValue” de FormGroup, etc. Los métodos de FormArray aseguran que los controles sean correctamente rastreado en la jerarquía del formulario.
espero que esto ayude.
Para crear formularios reactivos, un padre FormGroup es un deber. Esta FormGroup puede contener más formControlsniño formGroups o formArray
FormArray puede contener más array de formControls o un formGroup sí mismo.
¿Cuándo debemos usar formArray?
Lea esta hermosa publicación que explica el uso de formArray
El ejemplo interesante en ese blog es sobre los viajes. formGroup
La estructura de los viajes. formGroup utilizando formControl y formArray se vería algo como:
this.tripForm = this.fb.group(
name: [name, Validators.required],
cities: new FormArray(
[0] ---> new FormGroup(
name: new FormControl('', Validators.required),
places: new FormArray(
[0]--> new FormGroup(
name: new FormControl('', Validators.required),
),
[1]--> new FormGroup(
name: new FormControl('', Validators.required),
)
)
),
[1] ---> new FormGroup(
name: new FormControl('', Validators.required),
places: new FormArray(
[0]--> new FormGroup(
name: new FormControl('', Validators.required),
),
[1]--> new FormGroup(
name: new FormControl('', Validators.required),
)
)
))
)
No olvides jugar con esta DEMO, y nota el uso de array por cities y places de un viaje
De: Anton Moiseev Libro “Desarrollo angular con mecanografiado, segunda edición”. :
cuando lo necesites agregar (o eliminar) programáticamentecontrol S a un formularioutilizar FormaArray. es similar a Grupo de formularios pero tiene un variable de longitud. Mientras que Grupo de formularios representa un formulario completo o un subconjunto fijo de los campos de un formulario, FormaArray generalmente representa un colección de controles de formulario que pueden crecer o reducirse.
Por ejemplo, podrías usar FormaArray para permitir a los usuarios ingresar un número arbitrario de correos electrónicos.
valoraciones y reseñas
Si para ti ha sido de provecho este artículo, sería de mucha ayuda si lo compartieras con más entusiastas de la programación de esta forma contrubuyes a extender nuestra información.