How to get values from the form array and form group functions..Angular

Question

https://www.tektutorialshub.com/angular/nested-formarray-example-add-form-fields-dynamically/

the code is from here

    export class AppComponent  {

      title = 'Nested FormArray Example Add Form Fields Dynamically';

      empForm:FormGroup;


      constructor(private fb:FormBuilder) {

        this.empForm=this.fb.group({
          employees: this.fb.array([]) ,
        })
      }


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


      newEmployee(): FormGroup {
        return this.fb.group({
          firstName: '',
          lastName: '',
          skills:this.fb.array([])
        })
      }


      addEmployee() {
        console.log("Adding a employee");
        this.employees().push(this.newEmployee());
      }


      removeEmployee(empIndex:number) {
        this.employees().removeAt(empIndex);
      }


      employeeSkills(empIndex:number) : FormArray {
        return this.employees().at(empIndex).get("skills") as FormArray
      }

      newSkill(): FormGroup {
        return this.fb.group({
          skill: '',
          exp: '',
        })
      }

      addEmployeeSkill(empIndex:number) {
        this.employeeSkills(empIndex).push(this.newSkill());
      }

      removeEmployeeSkill(empIndex:number,skillIndex:number) {
        this.employeeSkills(empIndex).removeAt(skillIndex);
      }

      onSubmit() {
        console.log(this.empForm.value);
      }


    }

This is template:

    <form [formGroup]="empForm" (ngSubmit)="onSubmit()">

      <div formArrayName="employees">

        <div *ngFor="let employee of employees().controls; let empIndex=index">

          <div [formGroupName]="empIndex" style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;">
            {{empIndex}}
            First Name :
            <input type="text" formControlName="firstName">
            Last Name:
            <input type="text" formControlName="lastName">

            <button (click)="removeEmployee(empIndex)">Remove</button>


            <div formArrayName="skills">

              <div *ngFor="let skill of employeeSkills(empIndex).controls; let 
 skillIndex=index">



                <div [formGroupName]="skillIndex">
                  {{skillIndex}}
                  Skill :
                  <input type="text" formControlName="skill">
                  Exp:
                  <input type="text" formControlName="exp">

                  <button (click)="removeEmployeeSkill(empIndex,skillIndex)">Remove</button>

                </div>

              </div>
              <button type="button" (click)="addEmployeeSkill(empIndex)">Add Skill</button>
            </div>


          </div>

        </div>
      </div>

      <p>
        <button type="submit">Submit</button>
      </p>

    </form>


    <p>
      <button type="button" (click)="addEmployee()">Add Employee</button>
    </p>

so, I need go get values of firstName, lastName from empForm and skill: '',exp: ''from, skills array...

this function is not working for me to get values..

      get from_date() {
        return this.empForm.get("from_date");
      }

....thia is not working.. also not able to take values from skills array please help

Answer 1

When you submit the form, the structure of this.empForm.value could be described by the following interfaces.

export interface Employee {
  firstName: string;
  lastName: string;
  skills: Skill[];
}

export interface Skill {
  exp: string;
  skill: string;
}

Where empForm.value could be described by the following structure:

{
  employees: Employee[];
}

When you query the empForm on submit, you can get the data as if you're querying a regular object.

onSubmit() {
  const firstNames = this.empForm.value.employees.map(x => x.firstName);
  const firstEmployeeSkills = this.empForm.employees[0].skills.map(x => x.skill);
  // etc
}

As for this.empForm.get("from_date"), you don't have a property on the empForm called from_date, so this won't return anything.