How to pass array with multiple objects to Angular FormControl?

Question

Let's say I have an object with string values like this:

data = { input: '', description: '' }

where input is what user typed, that I grabbed in (change) function and description is what I have programmatically added in the function afterwards.

I'm passing an array of data objects to formControl with this.form.patchValue({control: this.array}) but when I check against it with this.form.get('control').value it returns an array with only first object (array[0]).

How do I get it to return entire array ?

Yong Shun · Accepted Answer · 2024-10-18 23:50:30Z

1

Ensure that you must create the N (number) of the FormGroup instance in your control FormArray based on the number of objects in your array before the patchValue().

this.form = new FormGroup({
  control: new FormArray([]),
});

for (let data of this.array) {
  (this.form.controls['control'] as FormArray).push(
    new FormGroup({
      input: new FormControl(),
      description: new FormControl(),
    })
  );
}

this.form.patchValue({ control: this.array });

You can also assign the value to the FormControl when initializing the FormGroup instance.

for (let data of this.array) {
  (this.form.controls['control'] as FormArray).push(
    new FormGroup({
      input: new FormControl(data.input),
      description: new FormControl(data.description),
    })
  );
}

Demo @ StackBlitz

answered Oct 18, 2024 at 23:50

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

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

2 Comments

SolisQuid Over a year ago

That seem to be what I'm looking for tho it's only working for array with defined number of objects. If I'm adding new ones the for loop is adding new items on top of those already there so for instance if there's one object in the array, adding 2nd one will make the form array have 3 objects (array[0] + array[0] & array[1]), adding 3rd one will make it have 6 (array[0] + array[0] & array[1] + array[0] & array[1] & array[2]) and so on. Tried reseting the control with this.form.controls['control'].reset() but it only resets previous fields to null, not removing them from the array.

SolisQuid Over a year ago

I've got it cleared with const arr = <FormArray>this.form.controls['control']; arr.controls = [];

desertnaut · Accepted Answer · 2024-10-21 11:09:53Z

0

Although the accepted answer worked for me, I’ve found this solution better. No need to iterate with for loop every time new control group is added.

I reused following functions to add control groups:

initControlGroup() {
    // initialize the group
    return this._fb.group({
      input: ['', Validators.required],
      description: ['']
    });
  }

addData() {
  // add data object to the list
  const control = <FormArray>this.form.controls['controlArray'];
  control.push(this.initControlGroup());
}

removeData(i: number) {
  // remove data object from the list
  const control = <FormArray>this.form.controls['controlArray'];
  control.removeAt(i);
}

Code adapted from https://stackoverflow.com/a/45249752/8679394

edited Oct 21, 2024 at 11:09

desertnaut

60.8k32 gold badges155 silver badges183 bronze badges

answered Oct 20, 2024 at 5:46

SolisQuid

231 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to pass array with multiple objects to Angular FormControl?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related