How to populate data into the FormGroup?

Question

I am trying to populate data into the 'technologies' form group, but unable to do that;

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

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,
            willingly_to_travel: this._trainnerservice.currentTrainner.personal_details.willingly_to_travel
        }
    });
    this.addlanguages_known();
    this.addTechs();
  }
  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));
      });
  }

  addTechs(): any {
    const control =  this.registrationForm.get('technologies') as FormArray;
    console.log(control);
    this._trainnerservice.currentTrainner.technologies.forEach(x => {
      control.push(this.fb.control(x));
    });
  }

Answer 1

Angular provides the ability to initialize your FormGroup on creation. I would suggest you initialize the values when you create registrationForm like below.

this.registrationForm = this.fb.group({
    ...
    technologies: this.fb.array(
        this.data.technologies && this.data.technologies.length ? 
            this.data.technologies.map(tech => this.addTech(tech)) : [this.addTech()]
    ),
    ...
});

addTech(tech: Technology = {costing: {}} as Technology): FormGroup {
    return this.fb.group({
        name: [tech.name || ''],
        experience : [tech.experience || ''],
        ratings : [tech.ratings || ''],
        costing :  this.fb.group({
            freshers: [tech.costing.freshers || ''],
            laterals : [tech.costing.laterals || ''],
            project_specific: [tech.costing.project_specific || '']
        }),
        work_as_consultant: [tech.work_as_consultant || '']
    });
}

where your Technology interface would look something like this

export interface Technology {
    name: string;
    experience: number;
    ratings: number;
    costing: Costing;
    work_as_consultant: string;
}

export interface Costing {
    freshers: number;
    laterals: number;
    project_specific: number;
}

Similarly, create interfaces for your other form groups and initialize them on creation as shown above.