abstract2Fa

Paquete: @tiendana/ngx-core/pipes

Convierte AbstractControl a FormArray con type safety en templates.

Características

✅ Type casting seguro de AbstractControl a FormArray
✅ Facilita iteración sobre FormArrays en templates
✅ Evita errores de tipos en templates
✅ Mejora autocompletado en IDEs

API

Sintaxis

{{ control | abstract2Fa }}

Parámetros

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

Retorno

El control como UntypedFormArray.

Uso

Iteración sobre FormArray

// Componente
form = this.fb.group({
  items: this.fb.array([
    this.fb.control('Item 1'),
    this.fb.control('Item 2')
  ])
});

// Template
@for (item of (form.controls.items | abstract2Fa).controls; track $index) {
  <input [formControl]="item" />
}

Con FormGroups Anidados

// Componente
form = this.fb.group({
  contacts: this.fb.array([
    this.fb.group({
      name: ['Juan'],
      email: ['juan@example.com']
    })
  ])
});

// Template
@for (contact of (form.controls.contacts | abstract2Fa).controls; track $index; let i = $index) {
  <div [formGroup]="contact">
    <h4>Contacto {{ i + 1 }}</h4>
    <input formControlName="name" />
    <input formControlName="email" />
  </div>
}

Acceso a Métodos de FormArray

// Template
<p>Total items: {{ (form.controls.items | abstract2Fa).length }}</p>

<button (click)="addItem()">
  Agregar
</button>

addItem() {
  this.form.controls.items.push(this.fb.control(''));
}

Pipes en eventos

Angular no permite pipes en expresiones de evento como (click). Mueve esa lógica a un método del componente; el pipe solo es un cast de tipos.

Casos de Uso

• Listas dinámicas en formularios
• Iteración sobre arrays de controles
• Formularios con elementos repetitivos
• Validación de arrays de datos

Alternativa sin Pipe

Sin el pipe, necesitas hacer casting manual:

// Sin pipe (verboso)
@for (item of $any(form.controls.items).controls; track $index) {
  <input [formControl]="item" />
}

// Con pipe (limpio)
@for (item of (form.controls.items | abstract2Fa).controls; track $index) {
  <input [formControl]="item" />
}

Notas

Itera sobre .controls

Un FormArray no es iterable, por eso @for recorre (array | abstract2Fa).controls. El pipe solo hace el cast de tipo: no copia ni transforma el control.

Type Safety

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

Combinación con abstract2Fg

Para FormGroups dentro de FormArrays, combina ambos pipes:

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