Как получить значения из массива форм и функций групп форм .. Angular

Question

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

код отсюда

    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);
      }


    }

Это шаблон:

    <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>

так что мне нужно go получить значения firstName, lastName из empForm и навыка: '', exp: '' from, массив навыков ...

эта функция не работает для меня, чтобы получить значения ..

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

.... thia не работает .. также не может принимать значения из массива навыков, пожалуйста, помогите

Answer 1

Когда вы отправляете форму, структура this.empForm.value может быть описана следующими интерфейсами.

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

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

Где empForm.value может быть описана следующей структурой:

{
  employees: Employee[];
}

Когда вы запрашиваете empForm при отправке, вы можете получить данные, как если бы вы запрашивали обычный объект.

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

Что касается this.empForm.get("from_date"), у вас нет свойство в empForm с именем from_date, поэтому оно ничего не вернет.