Saltar al contenido

cómo obtener el valor de la matriz de formulario anidado en el ejemplo de código angular

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)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *