Does sorting Angular reactive form array really requires sorting both controls and value?

Question

I've implemented formArray sortBy function in my angular app by sorting the formArray value and patch it after the sorting.

sortBy(FieldName: string) {
  let array = this.myItems.value;
  array.value.sort((a, b) => a[FieldName] - b[FieldName]);
  array.controls.sort((a, b) => a.value[FieldName] - b.value[FieldName]);
  this.myForm.controls.myItems.patchValue(array);
}

Working Stackblitz example

As you can see I had to sort both the formArray controls and its value.

My question is, Should I really sort it both or there is a better practice or a build in way of doing it. It looks like the controls and the value should be binded somehow.

N.F. · Accepted Answer · 2021-11-29 07:38:40Z

3

Just sorting by control is enough.

First, set myItem to this.form without bracket.

this.myForm = this.formBuilder.group({
  header: ['hello form'],
  myItems: myFormArray,
});

Then sort your FormArray by controls.

sortBy(FieldName: string) {
  this.myItems.controls.sort((a, b) => a.value[FieldName] - b.value[FieldName]);
}

If you need sorted myArray, you can get it by this.myForm.getRawValue().myItems.

answered Nov 29, 2021 at 7:38

N.F.

4,2025 gold badges29 silver badges63 bronze badges

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

1 Comment

ShayD Over a year ago

Thanks, bracket removed. Still my main doubt here was about the values that stored both in the array value and in the controls value. I'm afraid that ignoring it might cause bugs in the future

AVJT82 · Accepted Answer · 2021-11-29 08:21:35Z

1

Yes, you need to "kinda" sort by both, though you can make a one-liner of it. We need to remember, when you call myItems.value, this is just a regular JS object, and the formarray is no longer tied to this, in the sense that if you modify myItems.value afterwards, it will not reflect in the formarray, as the formarray is an array of formcontrols/formgroups, not a regular JS array. The myItems.value will also just reflect the current state of the formarray value, so if you assign it to a variable and then change the value of the formarray, the assigned variable will have the original value.

So as for the oneliner... You can do

this.myItems.setValue(this.myItems.value.sort((a, b) => a[FieldName] - b[FieldName]));

And as mentioned in other answer, remove the bracket when building the form:

myItems: myFormArray

YOUR MODIFIED STACKBLITZ

edited Nov 29, 2021 at 8:21

answered Nov 29, 2021 at 8:04

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

1 Comment

ShayD Over a year ago

Thanks for saying 'regular JS object'. I had to here it.

Collectives™ on Stack Overflow

Does sorting Angular reactive form array really requires sorting both controls and value?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related