如何从表单数组和表单组函数中获取值..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>

所以，我需要从 empForm 和技能中获取 firstName、lastName 的值：''、exp: ''from、skills 数组...

这个函数不适合我获取值..

      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 的属性，所以这不会返回任何内容。