dynamic formGroup within formArray using formBuilder angular 2

Question

I have an array on my backend called media that stores several objects. It looks something like this:

"media": [
    {
        "srcId": null;
        "primary": false,
        "thumbs": {
            "default": null
        },
        "type": null,
        "raw": null
    }
]

My edit-component.ts for the loading this array into the form looks like this:

  media: this._fb.array([
    this._fb.group({
      srcId: new FormControl(this.existingMedia.srcId),
      type: new FormControl(this.existingMedia.type),
      raw: new FormControl(this.existingMedia.raw),
      primary: new FormControl(this.existingMedia.primary),
      thumbs: this._fb.group({
        default: new FormControl(this.existingMedia.thumb.default)
      })
    })
  ]),

Right now this will load the first object from that media array but not other media objects that could be in the array. Is there a way to make the formBuilder group inside the formArray Media dynamic to the number of objects within the Media Array on the backend?

Any help/tips/suggestions would be much appreciated!

Update

In my ngOnInit I have:

  this.currentCard = selectedCurrentCard;
  for (let medias of this.currentCard.media){
    this.existingMedia = medias;

to iterate over my media array on the backend and

  const control = <FormArray>this.cardForm.controls['media'];
    control.push(this.initCurerntMedia());

with initCurrentMedia() looking like this: UPDATED initCurrentMedia() this updated version worked when called in ngOnInit() Thanks to the help of @AJT_82

initCurrentMedia() {
    this.currentCard.media.forEach(media => {
      const control = <FormArray>this.cardForm.controls['media'];
      control.push(
        this._fb.group({
          srcId: new FormControl(media.srcId),
          type: new FormControl(media.type),
          raw: new FormControl(media.raw),
          primary: new FormControl(media.primary),
          thumbs: this._fb.group({
            default: new FormControl()
          })
        })
      )
    })
  }

To populate my form with current media. It is still only populating one object.

AVJT82 · Accepted Answer · 2017-07-19 15:17:23Z

2

I like to build the form

this.myForm = this._fb.group({
  media: this._fb.array([])
})

and then after response have been fetched set the values, so after getting the response you can call a method, let's say setForm():

setForm() {
  this.media.forEach(x => {
    this.myForm.controls.media.push(
      this._fb.group({
        srcId: x.srcId,
        type: x.type,
        raw: x.raw,
        primary: x.primary,
        thumbs: this._fb.group({
          default: x.thumbs.default
        })        
      )
    })
  })
}

answered Jul 19, 2017 at 15:17

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

4 Comments

Brian Stanley Over a year ago

I am following your logic @AJT_82 but I am getting a typescript error about property forEach not existing on type AbstractControl.

AVJT82 Over a year ago

well this.media should point to the response and not the formarray. Seems you now are trying to iterate the formarray? The double naming is indeed a bit confusing, you should perhaps rename either :)

Brian Stanley Over a year ago

You are correct. I got this to work. I had to add in const control = <FormArray>this.myForm.controls['media']; control.push( after that it is working. Thank you @AJT_82!!!

AVJT82 Over a year ago

No problem, glad to hear it worked! Strange that the exact above code (without declaring variable for formarray as variable) didn't work as is, it has worked fine thus far for me. Well the most important thing is that it works now! Have a good one and Happy coding to you! :)

Collectives™ on Stack Overflow

dynamic formGroup within formArray using formBuilder angular 2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related