CODEWITHSUNDEEP
angularangular-reactive-forms
Nat_centralogic
Nat_centralogic

Reputation: 23

Is there a way to merge two form array controls?

I have two form arrays in my code. I need to combine them and perform addition and deletion on the combined array. I need to concatenate the form array controls of each form array

let a = this.nextBillForm.controls["electricityBillCycleEnergyCharges"] as FormArray;
let b = this.nextBillForm.controls["electricityBillCycleOtherCharges"] as FormArray;

1)populate by for each

a.forEach(element => {
  b.push(element);
});

2) concatenation

 a.concat(b)

Tried both ways. Both show errors

Upvotes: 1

Views: 4499

Answers (2)

Ashish Sharma
Ashish Sharma

Reputation: 679

Hi @Nat_centralogic Both the ways that you have tried will not work because the form Array object is not an Array reference. It is the reference of form group. FormArray reference does not any method like concat or push i.e. why it is throwing errors.

See in the image below:

enter image description here

Although by name it is obious to think it is array but it is not.

As a solution either you can link all items to single fromArray or use them sapratly to avoid complexity.

Upvotes: 0

Ludevik
Ludevik

Reputation: 7254

FormArray is not an array. It doesn't have forEach nor concat functions. You can operate on controls property though:

a.controls.forEach(control => {
 b.push(control);
});

or

const combined = a.controls.concat(b.controls);

See FormArray documentation

Upvotes: 7

Related Questions