cómo administrar la forma anidada array con procesador de valor de control en ejemplo de código angular

Posterior a de nuestra extensa recopilación de datos dimos con la respuesta este rompecabezas que pueden tener ciertos de nuestros lectores. Te dejamos la solución y nuestro objetivo es que resulte de mucha ayuda.

Ejemplo 1: formarray anidado en angular 8

<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>this.empForm.value 

Ejemplo 2: formarray anidado en angular 8

import Component from'@angular/core';import FormGroup, FormArray, FormBuilder from'@angular/forms'
 
 
@Component(
  selector:'app-root',
  templateUrl:'./app.component.html',
  styleUrls:['./app.component.css'])exportclassAppComponent
  
  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 returnthis.empForm.get("employees")as FormArray
  newEmployee(): FormGroup returnthis.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 returnthis.employees().at(empIndex).get("skills")as FormArray
  newSkill(): FormGroup returnthis.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);exportclasscountry
  id:string;
  name:string;constructor(id:string, name:string)this.id = id;this.name = name;

Acuérdate de que tienes la capacidad de decir si te ayudó.

---

---

Utiliza Nuestro Buscador