Soy muy nuevo en Angular y trato de crear un formulario para recopilar información del usuario.
Digamos que tengo un usuario que puede tener un "amigo" asociado con él. Una versión simplificada de mi FormGroup se ve así:
userInformation = new FormGroup({ name: new FormControl('', [Validators.required]), age: new FormControl('', [Validators.required]), friend: new FormGroup({ name: new FormControl('', [Validators.required]), age: new FormControl('', [Validators.required]) }) })En mi HTML, tengo:
<form [formGroup]="userInformation" (ngSubmit)="onSubmit"> <input type="text" placeholder="full name"> <input type="text" placeholder="full name"> <input type="text" placeholder="full name"> <input type="text" placeholder="full name"> </form>¿Cómo vinculo las dos primeras entradas a la información del usuario y las dos segundas entradas a la información del usuario.amigo?
Para formgroups anidados usamos formgroupName , por lo que todo lo que necesita crear es un contenedor, donde establece formGroupName y los controles de formulario "amigo" dentro de él:
<form [formGroup]="userInformation"> <input type="text" formControlName="name" placeholder="name" /> <input type="text" formControlName="age" placeholder="age" /> <ng-container formGroupName="friend"> <!-- ^^^^^^^^^HERE^^^^^^^^^^^^^^^^--> <input type="text" formControlName="name" placeholder="name" /> <input type="text" formControlName="age" placeholder="age" /> </ng-container> </form>