Angular 5 reactive form - patchValue with FormArray not working

Question

I have this reactive form in the Ionic3 framework, which I need to populate with data I retrieve from API. To do so I am using patchValue as I read somewhere that it is more reliable than setValue.

The problem I am facing is, it does not populate repeated form fields. To explain better I've created this example code.

I have tried other ways around like directly assigning data to the respective field instead of using for loop first, but that only populated 1 set instead of all 3.

Can someone point out what I am doing wrong, or provide a better solution?

Thank you

Your code works fine. It's just that your populate method creates new FormGroups and populates them with patchValue(), but never pushes these new form groups to the form array. — JB Nizet
patchValue() is not "more reliable". It does something different than setValue(). setValue expects a complete new value (containing a new value for every control of the form), whereas patchValue expects a partial new value (containing a new value for some of the controls of the form). — JB Nizet

Woot Woot · Accepted Answer · 2018-10-26T18:43:06

In your example set your for loop on the home component to look like this

for(const rooms of resp.room_data){

      const roomNumberControl = this.createRooms();
      (<FormArray>this.informationForm.controls.room_numbers).push
      (roomNumberControl);
      console.log(JSON.stringify(rooms));
    }

Create rooms would just need to have some data in them but that will create on object for everyone in the array. This is how I have done it in the past.

Angular 5 reactive form - patchValue with FormArray not working

1 Answers