abstract2Fg

Paquete: @tiendana/ngx-core/pipes

Convierte AbstractControl a FormGroup con type safety en templates.

Características

✅ Type casting seguro de AbstractControl a FormGroup
✅ Facilita acceso a FormGroups anidados
✅ Evita errores de tipos en templates
✅ Mejora autocompletado en IDEs

API

Sintaxis

{{ control | abstract2Fg }}

Parámetros

Parámetro	Tipo	Descripción	Requerido
value	AbstractControl | null | undefined	Control a convertir	✅

Retorno

El control como UntypedFormGroup.

Uso

Acceso a FormGroup Anidado

// Componente
form = this.fb.group({
  user: this.fb.group({
    name: [''],
    email: ['']
  })
});

// Template
<div [formGroup]="form.controls.user | abstract2Fg">
  <input formControlName="name" />
  <input formControlName="email" />
</div>

Múltiples Niveles de Anidación

// Componente
form = this.fb.group({
  company: this.fb.group({
    info: this.fb.group({
      name: [''],
      taxId: ['']
    }),
    address: this.fb.group({
      street: [''],
      city: ['']
    })
  })
});

// Template
<div [formGroup]="form.controls.company | abstract2Fg">
  <div [formGroup]="form.controls.company.controls.info | abstract2Fg">
    <input formControlName="name" />
    <input formControlName="taxId" />
  </div>
  
  <div [formGroup]="form.controls.company.controls.address | abstract2Fg">
    <input formControlName="street" />
    <input formControlName="city" />
  </div>
</div>

En FormArrays

// Componente
form = this.fb.group({
  contacts: this.fb.array([
    this.fb.group({
      name: [''],
      phone: ['']
    })
  ])
});

// Template
@for (contact of (form.controls.contacts | abstract2Fa).controls; track $index) {
  <div [formGroup]="contact | abstract2Fg">
    <input formControlName="name" />
    <input formControlName="phone" />
  </div>
}

Casos de Uso

• Formularios con secciones anidadas
• Perfiles de usuario con múltiples grupos
• Direcciones y datos de contacto
• Configuraciones complejas

Alternativa sin Pipe

Sin el pipe, necesitas hacer casting manual:

// Sin pipe (verboso)
<div [formGroup]="$any(form.controls.user)">
  <input formControlName="name" />
</div>

// Con pipe (limpio)
<div [formGroup]="form.controls.user | abstract2Fg">
  <input formControlName="name" />
</div>

Notas

Type Safety

Este pipe usa UntypedFormGroup en lugar de FormGroup<T> para mantener compatibilidad con diferentes versiones de Angular.

Combinación con abstract2Fa

Para acceder a FormGroups dentro de FormArrays, combina ambos pipes:

@for (group of (form.controls.items | abstract2Fa).controls; track $index) {
  <div [formGroup]="group | abstract2Fg">
    <input formControlName="field" />
  </div>
}

Alternativa TypeScript

En Angular 14+, considera usar FormGroup tipado en lugar de UntypedFormGroup para mejor type safety en el componente.