nested angular reactive form, how to use the form body details in ts file

Issue

https://stackblitz.com/edit/angular-cuukb4

In this code,

I got values of first name, last name, and skills values by mapping I need to pass these vals in body and iterate and display

  const body = {
      displayText: true,
      employee: [
        {

          firstName: this.employeeFirstName(0).value,
          lastName: this.employeeLastName(0).value,
         skills: [
            {
             skill: this.getEmployeeSkill(0,0),
             exp: this.getEmployeeExp(0,0)
            }
          ]
        }
      ]
    };

but this only gives me value for 0th employee and 0th skill, how do i make indices update and display them in my console.log(body). displayText value does not change and remains same for every iteration

so currently employeeFirstName, employeeLastName, getEmployeeSkill, getEmployeeExp get me, first name, employee name, skill and exp data.

but they only return it for 0th index

expected result in const body..

{
[
    {
          displayText: true,
          employee: [
            {

              firstName: 0th emp first name,
              lastName: 0th emp last name,
             skills: [
                {
                 skill: 0th employee 0th skill,
                 exp: 0th employee 0th exp
                },
                {
                 skill: 0th employee 1st skill,
                 exp: 0th employee 1st exp
                }
                .
                .
              ]
            }
          ]
        }
],
[
     {
          displayText: true,
          employee: [
            {

              firstName: 1st emp first name,
              lastName: 1st emp last name,
             skills: [
                {
                 skill: 1st employee 0th skill,
                 exp: 1st employee 0th exp
                },
                {
                 skill: 1st employee 1st skill,
                 exp: 1st employee 1st exp
                }
                .
                .
              ]
            }
          ]
        }
     ]
}

Solution

The structure that you're describing is the same as the structure of your form. Since this is the case, you can simply use the value of the employees FormArray.

Instead, you want to be able to build the body using the indices of the form arrays. To do this, you can use the map array function.

employees(): FormArray {
  return this.empForm.get("employees") as FormArray
}

onSubmit() {
  const formEmployees: [] = this.employees().value;
  const employee = formEmployees
    .map((_, i: number) => this.mapFormEmployee(i));
  const body = {
    displayText: true,
    employee: employee
  };

  console.log(body);
}

private mapFormEmployee(empIndex: number): {
  firstName: string;
  lastName: string;
  skills: { skill: string; exp: string; }[];
} {    
  const employeeFormGroup = this.employees().at(empIndex);

  return {
    firstName: employeeFormGroup.get('firstName').value,
    lastName: employeeFormGroup.get('lastName').value,
    skills: employeeFormGroup.get('skills').value.map((_, skillIndex) => 
      this.mapFormSkill(empIndex, skillIndex)
    )
  };
}

private mapFormSkill(empIndex: number, skillIndex: number): { skill: string; exp: string } {
  const employeeFormGroup = this.employees().at(empIndex);
  const skillFormGroup = (employeeFormGroup.get('skills') as FormArray).at(skillIndex);

  return {
    skill: skillFormGroup.get('skill').value,
    exp: skillFormGroup.get('exp').value
  };
}

You haven't gone into detail about why you need to do it this way, but this is one way of building the body using indices.

It would help if you gave a reason why you want to extract data from the form in this way instead of mapping directly from this.empForm.value.

I am mapping the data in an inefficient way as I wanted to keep the functionality similar to how you are doing it at the moment.

https://stackblitz.com/edit/angular-rbd4mj

Answered By - Kurt Hamilton