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;">empIndexFirstName:<input type="text" formControlName="firstName">LastName:<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">skillIndexSkill:<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)">AddSkill</button></div></div></div></div><p><button type="submit">Submit</button></p></form><p><button type="button"(click)="addEmployee()">AddEmployee</button></p>this.empForm.value
Ejemplo 2: formarray anidado en angular 8
importComponentfrom'@angular/core';importFormGroup,FormArray,FormBuilderfrom'@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():FormArrayreturnthis.empForm.get("employees")asFormArraynewEmployee():FormGroupreturnthis.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):FormArrayreturnthis.employees().at(empIndex).get("skills")asFormArraynewSkill():FormGroupreturnthis.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;
Calificaciones y comentarios
Puedes corroborar nuestra labor ejecutando un comentario y puntuándolo te lo agradecemos.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)