Sorting a reactive form array

Question

I have successfully built a reactive form but I wish to order the results using a custom pipe:

<tr *ngFor="let record of myForm.controls.openingHoursForm.controls | sort: 'When'; let c=index; let first = first; let last = last;" [formGroupName]="c">
                        <td><input type="text" formControlName="Heading" class="openingTimesField" /></td>
                        <td><input type="text" formControlName="Subheading" class="openingTimesField" /></td>
                        <td><input type="text" formControlName="When" class="openingTimesField" /></td>
                        <td><input type="text" formControlName="Times" class="openingTimesField" /></td>
                        <td><input type="text" formControlName="Emphasis" class="openingTimesField" /></td>
    </tr>

And my custom pipe looks like this:

import { Pipe } from "@angular/core";

@Pipe({
    name: "sort"
})
export class ArraySortPipe {
    transform(array: Array<string>, args: string): Array<string> {
        if (array !== undefined) {
            console.log(array);
            array.sort((a: any, b: any) => {
                if (a[args] < b[args]) {
                    return -1;
                } else if (a[args] > b[args]) {
                    return 1;
                } else {
                    return 0;
                }
            });
        }
        return array;
    }
}

But this doesn't seem to work. I'm aware that reactive forms array structure are different to that of a basic array since it has a nested "controls" object. Any ideas how I can go about this?

UPDATE: For reference here is the form set-up as well:

this.myForm = this.fBuilder.group({
            openingHoursForm: this.fBuilder.array([])
        });

this.openingHoursArray.forEach(element => {

                    (<FormArray>this.myForm.get('openingHoursForm')).push(this.fBuilder.group({
                            Id: [element.Id],
                            Heading: [element.Heading],
                            Subheading: [element.Subheading],
                            When: [element.When],
                            Times: [element.Times],
                            Emphasis: [element.Emphasis],
                            SortOrder: [element.SortOrder]
                    }));                  

                });

You can check my answer for the same question here.

Eugene Porodko
– Eugene Porodko

2023-03-06 09:37:23 +00:00
Commented Mar 6, 2023 at 9:37 — Eugene Porodko
– Eugene Porodko, Commented Mar 6, 2023 at 9:37

Pierre Mallet · Accepted Answer · 2018-02-12 17:38:50Z

6

EDITED: Add stackblitz POC :

Since you pass an array of FormGroup to your pipe you have to access value through a.controls[args].value;

    @Pipe({
        name: "sort",
        pure: false
    })
    export class ArraySortPipe {
        transform(array: Array<string>, args: string): Array<string> {
            if (array !== undefined) {
                return array.sort((a: any, b: any) => {

                    const aValue = a.controls[args].value;
                    const bValue = b.controls[args].value;

                    if (aValue < bValue) {
                        return -1;
                    } else if (aValue > bValue) {
                        return 1;
                    } else {
                        return 0;
                    }
                });
            }
            return array;
        }
    }

WATCHOUT : The pure FALSE in @Pipe decorator. With this the pipe will be reevaluated even if the input reference dont change. ( try to change the when value in the stackblitz and the row will be reordered )

NB: If you don't want to resort on the fly when the input is changed, you should to the sort in the form instantiation instead if using a pipe that will be "retrigger" on every change detection.

edited Feb 12, 2018 at 17:38

answered Feb 12, 2018 at 14:26

Pierre Mallet

7,2512 gold badges22 silver badges31 bronze badges

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

8 Comments

Andrew Howard Over a year ago

No sorry that doesn't work. It won't get that far into the array.sort unless a and b are the actual values to sort.

Andrew Howard Over a year ago

Sorry still doesn't work. If I put a console.log(a); after array.sort((a: any, b: any) => { nothing prints out.

Pierre Mallet Over a year ago

Ok, this time a check it on stackblitz, sorry for the two precedent unchecked answers.

Andrew Howard Over a year ago

Thanks so much, I'll give this a try when I'm back at my pc tomorrow :) will this work with sorting integers?

Pierre Mallet Over a year ago

Yes in the example i used integer. But you can sort Date (since Date object are native sortable) or anything you want as long as you provide the good custom sorting function

|

Collectives™ on Stack Overflow

Sorting a reactive form array

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related