patch values in formGroup with formArray in Angular?

Question

https://stackblitz.com/edit/angular-fzgtqc?file=src%2Fapp%2Fapp.component.ts Reproducible Example.

This is the sample data I am working on https://stackblitz.com/edit/angular-fzgtqc?file=SampleData

app.component.ts

editTrainner(trainner: Trainner) {
    this._trainnerservice.currentTrainner = Object.assign({}, trainner);
    this.registrationForm.patchValue({
          personal_details: { type: Object,
            name: { type: Object,
                first_name: this._trainnerservice.currentTrainner.personal_details.name.first_name,
                last_name: this._trainnerservice.currentTrainner.personal_details.name.last_name
            },
            dob: this._trainnerservice.currentTrainner.personal_details.dob,
            about_yourself: this._trainnerservice.currentTrainner.personal_details.about_yourself,
            languages_known: this.fb.array([this.addlanguages_known()]),
            willingly_to_travel: this._trainnerservice.currentTrainner.personal_details.willingly_to_travel
        }
    });
  }
  addlanguages_known(): any {
    const control = this.registrationForm.get('languages_known') as FormArray;
    this._trainnerservice.currentTrainner.personal_details.languages_known.forEach(x => {
        control.push(this.fb.control(''));
      });
  }

while executing the code I am getting an error: "Cannot read property 'push' of null"

I want to push the Form array data into the form when the edit button will be clicked by the user.

Answer 1

First of all, you should remove the function to set the values from your formarray from inside patchValue. Instead call the function addlanguages_known() just as it is. Then your path to the formarray is incorrect. Your formarray is inside personal_details, so correct to:

addlanguages_known(): any {
  const control = this.registrationForm.get('personal_details.languages_known') as FormArray;
  this._trainnerservice.currentTrainner.personal_details.languages_known.forEach(x => {
    control.push(this.fb.control(x));
  });
}

And as mentioned, remove following line from editTrainner():

languages_known: this.fb.array([this.addlanguages_known()]),

Your forked STACKBLITZ

PS: Not related, but you are using some kind of generic typing Object, you should type your data according to a model.