How to patch values in formGroup with formArray in Angular?

Question

Once the user will click on the edit button, I want to patch data in the reactive form. Currently, I am able to patch value with normal fields. But unable patch values in Dynamic fields and Arrays.

ngOnInit() {
    this.registrationForm = this.fb.group({
      personal_details : this.fb.group({
        name: this.fb.group({
          first_name: [''],
          last_name: ['']
        }),
        about_yourself: [''],
        dob: [''],
        // lang: [''],
        languages_known: this.fb.array([]),
        willingly_to_travel: ['']
      }),
      technologies: this.fb.array([
        this.addTech()
      ]),

      certifications : this.fb.array([
        this.addCertificate()
      ]),
    });
    this.getAllTrainners();
  }

When the user clicks on edit button following function will run :

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(''));
      });
  }

Please provide a minimal reproducible example, currently this is not. Best would be a StackBlitz. — AT82
Great! Could you also add to the stackBlitz a sample of your data that you are receiving from the API, much easier to debug when having some data to work with :) — AT82
@AJT82 stackblitz.com/edit/angular-fzgtqc?file=SampleData This is the sample data — GRV

Vato Vato · Accepted Answer · 2019-09-18T11:59:41

You can pass the exact FormGroup in function call.

for example I have this code:

  let mainFormGroup = new FormGroup({
    myFormGroupName: new FormControl(),
    myFormArray: new FormArray([])
  });

  let mainFormGroup = new FormGroup({
    myFormGroupName: new FormControl(),
    myFormArray: new FormArray([
      new FormGroup({
      childFormControl: new FormControl(),
      })
    ])
  });

for my FormArray I use ngFor

<div *ngFor="let eachFormGroup of mainFormGroup.controls['myFormArray'].controls; let pointtIndex=index;">

later in my loop I use:

(change)="onFileChanged($event, eachFormGroup)"

in my onFileChange function I can now access FormGroup.

  onFileChanged(event, eachFormGroup: FormGroup) {
    eachFormGroup.patchValue({
      childFormControl: 'blablabla'
    });
  }

also you can use Index of ngFor to access the array control using at(index). in my case I have pointtIndex in ngFor line. you can also pass that in you function.

myFormArray.at(pointtIndex).get('childFormControl').setValue('value');

if you just want to get value from group you can use either

mainFormGroup.get('myFormGroupName').setValue('name');

or

mainFormGroup.patchValue({ myFormGroupName: 'name'});

How to patch values in formGroup with formArray in Angular?

1 Answers