[Fixed] Get the values from array from Form Group in Reactive Forms in Angular

Issue

I have a list of form groups in a control. I am trying to get array of values from the array from form groups in typescript

tableGroupData : FormGroup;
CustomerForm = this.formBuilder.group(
    {
      Name: '',
      AddressTable: ''
    },
this.CustomerForm.patchValue({
     AddressTable: this.tableGroupData.controls
            });
const values = this.tableGroupData.controls.map(x => x.values) // This does not work because there is no map function for controls.

Controls is just an array of FormGroup. Here is an image. How can I just get the array of values from FormGroup?

Solution

If you have nested formGroups, you can instead use a formArray and then access the values of the formGroups with formArray.value. As a result you get an array of objects with the values of each control of that formGroup. If you just need the values you could then map them out of each object.

See this StackBlitz