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

Kurt Hamilton · Accepted Answer · 2020-03-28 08:14:08Z

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.

answered Mar 28, 2020 at 8:14

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rakshanda Bhure Over a year ago

Here I wrote it in my submit function, but in console it gives error as cant read 0, please help

Kurt Hamilton Over a year ago

Your form code is fine. You should remove .value from your submit code. console.log("first emp skills is",this. getEmployeeSkills(0)). I don't understand why you've added .value to this, when getEmployeeSkills is your own function, and you know that it returns an array. I would highly recommend using Typescript wherever you can, it really helps eliminate little bugs like this. stackblitz.com/edit/angular-4n2hvd

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related