title: How to get values from the form array and form group functions..Angular
body: <p><a href="https://www.tektutorialshub.com/angular/nested-formarray-example-add-form-fields-dynamically/" rel="nofollow noreferrer">https://www.tektutorialshub.com/angular/nested-formarray-example-add-form-fields-dynamically/</a></p>
  
  <p>the code is from here</p>
  
  <pre><code>    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);
        }
  
  
      }
  </code></pre>
  
  <p>This is template:</p>
  
  <pre><code>    &lt;form [formGroup]="empForm" (ngSubmit)="onSubmit()"&gt;
  
        &lt;div formArrayName="employees"&gt;
  
          &lt;div *ngFor="let employee of employees().controls; let empIndex=index"&gt;
  
            &lt;div [formGroupName]="empIndex" style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;"&gt;
              {{empIndex}}
              First Name :
              &lt;input type="text" formControlName="firstName"&gt;
              Last Name:
              &lt;input type="text" formControlName="lastName"&gt;
  
              &lt;button (click)="removeEmployee(empIndex)"&gt;Remove&lt;/button&gt;
  
  
              &lt;div formArrayName="skills"&gt;
  
                &lt;div *ngFor="let skill of employeeSkills(empIndex).controls; let 
   skillIndex=index"&gt;
  
  
  
                  &lt;div [formGroupName]="skillIndex"&gt;
                    {{skillIndex}}
                    Skill :
                    &lt;input type="text" formControlName="skill"&gt;
                    Exp:
                    &lt;input type="text" formControlName="exp"&gt;
  
                    &lt;button (click)="removeEmployeeSkill(empIndex,skillIndex)"&gt;Remove&lt;/button&gt;
  
                  &lt;/div&gt;
  
                &lt;/div&gt;
                &lt;button type="button" (click)="addEmployeeSkill(empIndex)"&gt;Add Skill&lt;/button&gt;
              &lt;/div&gt;
  
  
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;p&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
        &lt;/p&gt;
  
      &lt;/form&gt;
  
  
      &lt;p&gt;
        &lt;button type="button" (click)="addEmployee()"&gt;Add Employee&lt;/button&gt;
      &lt;/p&gt;
  </code></pre>
  
  <p>so, I need go get values of  firstName, lastName from empForm and skill: '',exp: ''from, skills array...</p>
  
  <p>this function is not working for me to get values..</p>
  
  <pre><code>      get from_date() {
          return this.empForm.get("from_date");
        }
  </code></pre>
  
  <p>....thia is not working..
  also not able to take values from  skills array
  please help</p>