Volver a la página principal
sábado 22 marzo 2025
4

Cómo gestionar formularios anidados en Angular con ControlContainer

En Angular, ControlContainer permite gestionar formularios anidados dentro de formularios principales, facilitando la comunicación entre componentes y la reutilización de formularios. Es útil cuando se necesita dividir un formulario grande en componentes más pequeños y mantener su estado sincronizado.

¿Qué es ControlContainer en Angular?

ControlContainer es un servicio de Angular que proporciona acceso al control de formulario padre desde un componente hijo. Se utiliza principalmente en formularios reactivos cuando se desea que un componente hijo participe en la validación y estructura del formulario principal.

Implementación de ControlContainer

Para usar ControlContainer, se inyecta en el componente hijo y se vincula a un FormGroup definido en el componente padre.

Ejemplo de uso:

1. Componente padre (parent.component.ts)

Define un FormGroup y usa el selector del componente hijo dentro del formulario. 

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

@Component({
  selector: 'app-parent',
  template: `
    <form [formGroup]="form">
      <app-child formGroupName="user"></app-child>
      <button type="submit">Enviar</button>
    </form>
  `,
})
export class ParentComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      user: this.fb.group({
        name: [''],
        email: ['']
      })
    });
  }
}

2. Componente hijo (child.component.ts)

Usa ControlContainer para conectarse al FormGroup del padre. 

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

@Component({
  selector: 'app-child',
  template: `
    <div [formGroup]="form">
      <label>Nombre: <input formControlName="name"></label>
      <label>Email: <input formControlName="email"></label>
    </div>
  `,
})
export class ChildComponent {
  get form(): FormGroup {
    return this.controlContainer.control as FormGroup;
  }

  constructor(private controlContainer: ControlContainer) {}
}

Resumen

Propiedad/Servicio Descripción
ControlContainer Permite que un componente hijo acceda al formulario padre.
formGroupName Vincula el componente hijo a un grupo de controles dentro del FormGroup del padre.
FormGroup Estructura que gestiona un conjunto de controles de formulario.
Etiquetas:
angular
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer