Angular,如何从嵌套表单组中获取表单数组值

拉克珊达·布瑞

我需要在我的表单组中获取值,我不知道我的 get 函数应该说什么 这是 TS 代码

import { Component } from '@angular/core';
  import { FormGroup, FormArray, FormBuilder } from '@angular/forms'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
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);
  }


}


export class country {
  id: string;
  name: string;

  constructor(id: string, name: string) {
    this.id = id;
    this.name = name;
  }
}

模板

<h1>{{title}}</h1>

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

这将技能值作为包含技能和经验值的数组

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

但是我需要技能和emp的值,有什么办法可以得到吗?我已经尝试过使用

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

但它给了我错误说,无法获得 null 的值

卡塞斯

如果以下内容为您提供了一组您需要的值对,

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

您可以解析数组并从中获取值。

getEmployeeSkills(index: number){
    const employee  = this.empForm.value.employees[index]
    if (employee === undefined) return null
    return employee.skills.length ===0 ? null: employee.skills.map(skill => skill.skill)
  }

我在这里为您构建了一个小示例:https : //stackblitz.com/edit/angular-3acuz7?file=src%2Fapp%2Fapp.component.ts

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章