Angular Filter FormArray by index

Question

I have a reactive form that is referenced via an accessor, I want to filter it by returning the index that matches the search term from the input field.

ts file

//accessors
get listAccessor() {
    return this.listGroupForm.get('listContainer') as FormArray
}

private _initForm() {
    this.listGroupForm = this._formBuilder.group({
        listContainer: this._formBuilder.array((this._listData || []).map((item:ListTypes)=> {
            return this._formBuilder.group({
                id: [this._userID],
                list_id: [item.list_id],
                title: [{value: item.title, disabled: true},Validators.required],
            })
        }))
    })
}

html

            <div class="flex flex-wrap pt-5 justify-center desk:flex-row desk:pt-7 desk:items-center">
                <div class="flex w-full desk:w-auto">
                    <input mat-input type="text" class="flex border rounded p-2" #search placeholder="Search Lists" (input)="formatSearch($event)" (keydown.enter)="searchLists(search.value)"/>   
                </div>
                <div class="flex w-full desk:w-auto">
                    <button mat-button (click)="searchLists(search.value)" class="w-full mt-5 ml-0 desk:mt-0 desk:w-auto desk:ml-5"><div class="text-black border p-2 rounded border-black hover:bg-gray-400 dark:text-gray-400 dark:border-gray-400 dark:hover:bg-blue-950">Search</div></button> 
                </div>
                <div class="flex flex-wrap pt-1 desk:flex-row desk:pt-7 pb-7 desk:items-center">
                    <button mat-button class="w-full mt-5 ml-0 desk:mt-0 desk:w-auto">
                        <div (click)="addList()" class="flex items-center text-black border p-2 rounded border-black hover:bg-gray-400 dark:text-gray-400 dark:border-gray-400 dark:hover:bg-blue-950">
                            <mat-icon>create_new_folder</mat-icon>New List
                        </div>
                    </button>
                </div>   
            </div>
            <form [formGroup]="listGroupForm" class="pb-4 overflow-y-scroll overflow-x-hidden" style="max-height:50vh;" cdkDropList (cdkDropListDropped)="drop($event)">
                <ng-container formArrayName="listContainer">
                    <div *ngFor="let data of listAccessor.controls; let i = index" class="pb-6" cdkDrag>
                        <div [formGroupName]="i" class="flex-col pr-2">
                            <div class="flex flex-wrap w-full desk:flex-row desk:items-center border rounded bg-gray-300 border-black dark:border-gray-400 dark:bg-black dark:text-gray-400">
                                <div class="w-full">
                                    <div class="flex items-center w-full  bg-gray-400 dark:bg-blue-950">
                                        <div class="flex w-full pt-4 pl-2 desk:pl-4 pb-4 text-xl items-center">
                                            <input mat-input (input)="formatInputName(i,null,$event)" formControlName="title" type="text" class="title text-black bg-gray-400 dark:text-gray-400 dark:bg-blue-950" placeholder="Enter List Name"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-container>
            </form>

I've written a method (below) that is matching the term and getting the index, however I don't know how to update the form so the ngFor in the html; that is iterating over the reactive form displays only the filtered index.

 public searchLists(search: string) {  
        return this.listAccessor.controls.filter((item,index) => {
            if (item.get('title')?.value === search) {
                console.log(item,index)
            }
        })
    }

Thank you in advance.

You can use findIndex: this.listAccessor.value.findIndex(x=>x==search) (return -1 if not found) — Eliseo
– Eliseo, Commented Jul 3, 2023 at 7:19
that's achieving the same thing as my method finding the index , what I need is to update the reactive form to only display the record that matches the found index. — Tank
– Tank, Commented Jul 3, 2023 at 11:42

Eliseo · Accepted Answer · 2023-07-03 12:33:41Z

0

If you want to edit a formGroup orf the formArray the only you need is know the index

You can to have a function

getGroup(index)
{
  return this.listAccessor.at(index) as FormGroup
}

If you have a variable "index", you can use like another FormGroup (remember the variable should be -1 if no have some selected)

<form *ngIf="index!=-1" [formGroup]="getGroup(index)">
   <input formControlName="title">
</form>

But you can not to have in the same screen two inputs with formControlName ask about the same formControl.

The only solution in this case is use ngModel and ngModelChange in one of the inputs in the way

<input (ngModelChange)="getControlTitle(index).setValue("$event")
       [ngModel]=getControlTitle(index).value/>

answered Jul 3, 2023 at 12:33

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Filter FormArray by index

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related