How to load data into a form with FormArray, display it in a table and then send the loaded data in one go?

Question

i am working with Angular table and reactive forms

I have a form, when the fields are completed, this data goes into a table and the form is reset.
I am using reactive forms. At the end, the user should send all the data completed at once, all this with only one form with formArray
Behavior I have: when the user loads a data and sends to the table, the table is updated correctly, but it creates another form again (not the expected behavior)

This is what i have: StackBlitz

  makeForm() {
this.myForm = this.fB.group({
  // Cabecera
  planilla: [null, Validators.required],
  fecha: [null, Validators.required],
  // Detalle
  units: this.fB.array([
    this.getUnit()
 ])
 });
}

  private getUnit() {
return this.fB.group({
    codigo: null,
    vencimiento: null,
    lote: null,
    cantidad: null,
    precio_individual: null,
    total_precio: null,
 });
}
    addUnit(value) { 
  let model = { codigo: value[0].codigo, descripcion: value[0].descripcion, lote: value[0].lote, mes: value[0].mes, anho: value[0].anho, cantidad: value[0].cantidad, precio_individual: value[0].precio_individual, total: value[0].total_precio};
  this.test.push(model);  
  this.test = [...this.test];
  console.log(this.test);
  const control = <FormArray>this.myForm.controls['units'];
  control.push(this.getUnit());
  this.myForm.get('units').reset();
}

I know that the problem comes when the user loads a new data, a new control is created, then the same inputs are created, because in my html i have this:

*ngFor="let unit of this.entradaProductoForm.get('units')['controls']; let i = index"

When the user loads a data, it creates a new control then it creates another form like it (I don't want this). How could I get this behavior but keep the user's data in the formArray?

Is there a specific reason you want to use the formArray and the controls to store the data? It seems a bit wonky instead of letting the formGroup and controls decide how the form looks and then have a local variable store the results. — Henrik Ståhlberg
– Henrik Ståhlberg, Commented Jan 14, 2021 at 23:14
I had a specific design reason but I was able to change it. I did something similar to what you said by saving the data in a local variable. I appreciate the answers. — klitown
– klitown, Commented Jan 15, 2021 at 17:56

Henrik Ståhlberg · Accepted Answer · 2021-01-14 23:11:07Z

1

You are adding more controls with the control.push(...). Store the result in another field instead.

// const control = <FormArray>this.myForm.controls['units'];
// control.push(this.getUnit());

// The result field holds the data
this.result = {
  planilla: this.myForm.controls.planilla.value,
  fecha: this.myForm.controls.fecha.value,
  units: [...this.test]
};

edited Jan 14, 2021 at 23:11

answered Jan 14, 2021 at 22:24

Henrik Ståhlberg

3181 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

klitown Over a year ago

I just want to reset the "units" array, that's why I have the this.myForm.get('units').reset();. The first part of the form (planilla, fecha) remains always the same, only the array can have more data if the user needs it.The final form should look like this: img

Henrik Ståhlberg Over a year ago

Ok then just don't reset the planilla and fecha controls. What are you trying to achieve by pushing new controls into myForm.controls?

klitown · Accepted Answer · 2021-01-15 17:59:06Z

0

Although I personally implemented it differently, if someone needs to do it the way it is in the stackblitz, you need to store the form data in a variable and then send it to the formArray (The answer above from Henrik Ståhlberg also works!)

Remove
// const control = <FormArray>this.myForm.controls['units'];
// control.push(this.getUnit());
```
```
Add
this.myForm.setControl('myFormArrayName', this.formBuilder.array(this.test));
(where test is the local variable)
```

answered Jan 15, 2021 at 17:59

klitown

351 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to load data into a form with FormArray, display it in a table and then send the loaded data in one go?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related