Angular - setValue() of array of formGroups sets last object for whole formArray value

Question

I have a form like this with an array of form groups objform.

this.objform = this.fb.group({
  val: null,
  string: '',
  arr: this.fb.array([null, null, null])
})
this.nestedform = this.fb.group({
  arr: this.fb.array([this.objform, this.objform, this.objform]),
  test1: null,
  test2: ""
})

I have ran into a problem that when I setValue() of this.nestedform, the value of arr is the last obj in my array over and over. Why is this happening? And am I just making some silly mistake?

Thanks

P.S. I have a stackblitz here if you want to see the full example.

Answer 1

you're asingning the same object to the array in nestedForm. Use a function that return a formGroup

  getGroup()
  {
    return this.fb.group({
      val: null,
      str: '',
      arr: this.fb.array([null, null, null])
    })
  }

And use when create the form

this.nestedform = this.fb.group({
  arr: this.fb.array([this.getGroup(), this.getGroup(), this.getGroup()]),
  test1: null,
  test2: ""
})

So, you has a different "objects"