What is the ideal way to sort a FormArray object in Angular 2+?

angular 6 formarray valuechanges
get formgroup from formarray
formarray patchvalue
formarray in angular 8 example
formarray get index
there are no form controls registered with this array yet.
formarray validation angular 6
angular 2 iterate formarray

I have a formArray which consist of multiple form groups. I need to sort the array dynamically based on a boolean field present in each of the form group in the array.

The boolean field is a checkbox and at any given point of time only one checkbox can be checked (mimics radio button). So when a checkbox is clicked I need to sort the formArray based on the one that is selected.

I know the documentation suggests not to mess with the AbstractControls[] present in the formArray, so what would be the ideal way to dynamically sort the array ?

I have tried to slice the array and set the controls back into the formArray but I keep getting an error "Must supply a value for form control with name: 'primaryIndicator'."

const abstractControls = this.formArray.controls
          .slice()
          .sort((a, b) => {
            return (a as FormGroup).get('primaryIndicator').value ? -1 : (b as FormGroup).get('primaryIndicator').value ? 1 : 0;
          });
        this.formArray.setValue(abstractControls);

If this is not the right way, what would be the best approach to solve such a scenario ?

I do not think it would be the best way, but get the values from formarray, do whatever you want with it and patch them back.

var myArray = this.formArray.value;
//do sorting here with myArray.sort 
this.formArray.patchValue(myArray)

Do not change the length and schema of this.formArray. Patchvalue can only patch values, if they have same structure.

Angular FormArray setValue() and patchValue(), How do you dynamically add and remove form fields in angular 5? content_copy const arr = new FormArray ([new FormControl ('Nancy'), new FormControl ('Drew')], {validators: myValidator, asyncValidators: myAsyncValidator}); Set the updateOn property for all controls in a form arraylink. The options object is used to set a default value for each child control's updateOn property.

Sorting and Filtering

  sortArray(array: Array<any>, prop: string): Array<any> {
    return array.sort((a, b) => {
      prop.split('.').forEach(p => {
        a = a[p];
        b = b[p];
      });

      return (a > b) ? 1 : ((b > a) ? -1 : 0);
    });
  }

then the call

const cartItemsFormArr = this.cartForm.get('cartItemsCtrls') as FormArray;


this.cartForm.controls['cartItemsCtrls'] = this._fb.array(
  this.sortArray(cartItemsFormArr.controls.filter(ctrl => !ctrl.value['isChecked']), 'value.idShoppingCartDetail'));

FormArray, A FormArray aggregates the values of each child FormControl into an array. The state is a standalone value or a form state object with both a value and a disabled For enabled controls only, the value property is the best way to get the value of FormControl(), new FormControl() ]); console.log(arr.length); // 2 arr.​clear();  A FormArray is responsible for managing a collection of AbstractControl, which can be a FormGroup, a FormControl, or another FormArray. Just like a FormGroup, which groups AbstractControl objects in an object, a FormArray does the same but in an array. Angular exposes specific APIs to help you manage this collection, which we’ll delve into

I already had an array of sorted values and use lodash's _.sortBy method like this:

const orderedTitles: Array<string> = ['title1', 'title2', 'title3'];
const pagesFormArray: FormArray = (this.form.get('pages') as FormArray);
pagesFormArray.controls = _.sortBy(pagesFormArray.controls, (control) => {
  return _.indexOf(orderedTitles, control.value.title'
});

The trouble I had with using @Lorfme's answer, was that I was extending the base Angular form controls and setting additional properties on my classes. Like this:

class MyNewFormArray extends FormArray {
  private additionalStuff;

  constructor(formArgs, additionalStuff) {
    super(formArgs);
    this.additional = additionalStuff;
  }

  someMethod() {
    return this.additionalStuff;
  }
}

Angular Reactive Forms: The Ultimate Guide to FormArray, We'll learn when and how to use it, both in the component and in the template. Let's see what other built-in methods are at our disposal: Now let's see how we manage FormGroup objects within a FormArray : for JS Applications; Spectator: A Powerful Tool to Simplify Your Angular Tests; Transloco:  In angular 2 we don't have pre-defined filter and order by as it was with AngularJs, we need to create it for our requirements. It is time killing but we need to do it, (see No FilterPipe or OrderByPipe). In this article we are going to see how we can create filter called pipe in angular 2 and sorting feature called Order By.

Angular, I'm building an a form using FormArray in my Angular app: public form = new users change the order of previously entered experiences: Question: How is this best implemented? temp = Object.assign({}, (<FormArray> this.form.controls['​experiences']).at(i Dynamic way to add Reactive Forms Validators in Angular 2​? Add/Push and Remove Form fields dynamically to FormArray with Reactive Forms in Angular { FormBuilder, FormGroup, FormArray } from '@angular/forms arrayItems is an array of object which

sort-angular-form, 30. import { Component } from '@angular/core';. import { FormGroup, FormBuilder​,. Validators, FormArray, FormControl } from. '@angular/forms';. @Component({. Introduction to the Angular Material Data Table. The Material Data Table component is a generic component for displaying tabulated data. Although we can easily give it a Material Design look and feel, this is actually not mandatory. In fact, we can give the Angular Material Data table an alternative UI design if needed.

The Ultimate Guide to Forms in Angular « ng-book.com – blog, The two fundamental objects in Angular forms are FormControl and FormGroup . Most forms have more than one field, so we need a way to manage multiple FormControl s. This means we can attach it to our input tag by adding this sort of attribute: This is great because it means we can reference sku anywhere in our  The next step is to populate the programming language FormArray. This FormArray will contain an array of FormGroup and each FormGroup will host multiple FormControl instances. Shown in Listing 6 is the logic used to populate the FormArray and the langControlMetada object that will be utilized by the HTML template later on. The later object is

Comments
  • thanks, i did try it this too, it doesn't seem to work. Anyways I have changed my implementation to now have to loops one to look for the indicator true as the first element to be displayed, second loop for all the elements that are false. Its not an elegant solution, but thats the best I could come up with. Wish angular had a sorting predicate on the formArray too :)
  • I use it so in my projects.... But you are right, sorting in formarrays should be avaiable out of the box. Did you made an issue on github already?