Tengo un FormArray
que se compone de FormGroup
con la siguiente estructura:
let formGroup: FormGroup = this.fb.group({
checked: this.fb.control(false),
id_lista: this.fb.control(element.id_lista[0]),
nombre: this.fb.control(element.nombre),
codigoInterno: this.fb.control(element.codigo_interno),
porcentaje_original: this.fb.control({ value: element.porcentaje_revision, disabled: true }),
porcentaje: this.fb.control(element.porcentaje_revision, [Validators.min(10), Validators.max(100)]),
auditoria_original: this.fb.control({ value: element.porcentaje_auditoria, disabled: true }),
auditoria: this.fb.control(element.porcentaje_auditoria, [Validators.min(10), Validators.max(100)]),
});
Y los muestro en el HTML asi:
<tr *ngFor="let saleList of salesListArray.controls [formGroupName]="index">
<td>
<input type="checkbox" formControlName="checked" (change)="onChange(saleList, $event.target.checked)">
</td>
....
</tr>
Intente hacer un Filter
:
@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
public transform(values: any[], filter: string): any[] {
if (!values || !values.length) return [];
if (!filter) return values;
return values.filter(v => v.value.nombre.indexOf(filter) >= 0);
}
}
Sin embargo, me devuelve los items filtrados pero sin valores, solo los FormGroup
.
ACTUALIZACION
Estimados, encontre el error, al parecer al no tener un index dentro del ngFor
se perdian los datos y por eso no cargaban.
<tr *ngFor="let saleList of salesListArray.controls | filter: searchText; let i=index;" [formGroupName]="i">