Filter items from FormArray

I have a FormArray that is made up of FormGroup with the following structure:

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)]),
});

And I show them in HTML like this:

<tr *ngFor="let saleList of salesListArray.controls [formGroupName]="index">
    <td>
        <input type="checkbox" formControlName="checked" (change)="onChange(saleList, $event.target.checked)">
    </td>
 ....
</tr>

Try doing 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);
    }
}

However, it returns the filtered items but without values, only the FormGroup .

UPDATE

Dear, I found the error, apparently not having an index within the ngFor data was lost and therefore did not load.

<tr *ngFor="let saleList of salesListArray.controls | filter: searchText; let i=index;" [formGroupName]="i">