Angular FormArray contents order

Question

Hya,

I have the below setup:

App.Component.Ts contents

carForm: FormGroup;

constructor(
    private fb: FormBuilder
  ) { 
    this.carForm= this.fb.group({
      name: '',
      type: '',
      extras: this.fb.array([])
    });
  }

get carExtras(): FormArray {
    return this.carForm.get('extras') as FormArray;
  }

addNewExtra() {
   this.carExtras.push(this.fb.group(new Extra());
}

Extra Model

export class Extra {
name: string = '';
description: string = '';
}

Now lets say i add 4 new Extras, the array would look as follows:

1. name = "Phantom Wheels", description = "Big dark wheels coz driver is overcompensating"
2. name = "Clearshield", description = "Simple tint that we overcharge customers"
3. name = "Rainbow Paint Job", description = "Leftover random paints mixed and thrown onto car"
4. name = "Slick Rims", description = "Major overcompensation"

I want to be able to programmatically change the order of the 4 items listed. Say i click up button next to "Slick Rims", it will swap positions with "Rainbow Paint Job" item. If i press it again it will swap positions with "Clearshield" with result as follows.

1. name = "Phantom Wheels", description = "Big dark wheels coz driver is overcompensating"
2. name = "Slick Rims", description = "Major overcompensation"
3. name = "Clearshield", description = "Simple tint that we overcharge customers"
4. name = "Rainbow Paint Job", description = "Leftover random paints mixed and thrown onto car"

Same principle if i press the down button for the entry.

Any ideas how to achieve this, its doing my head in on how to achieve this with a FormArray.

Answer 1

Assuming your form array looks like this in HTML:

  <div formArrayName="extras">
    extras:
    <div *ngFor="let extra of carForm.get('extras').controls; let i=index" [formGroupName]="i" >
      <input formControlName="name">
      <input formControlName="description">
      <button (click)="moveUp(i)"> UP </button>
      <button (click)="moveDown(i)"> DOWN </button>
    </div>
  </div>

you can create moveUp and moveDown functions to swap values at indexes (i-1, i) or (i, i+1) if it is possible

  moveUp(index: number) {
    if (index > 0) {
          const extrasFormArray = this.carForm.get('extras') as FormArray;
          const extras = extrasFormArray.value;
          const newExtras = this.swap(extras, index - 1, index); 
          extrasFormArray.setValue(newExtras);
    }
  }

  moveDown(index: number) {
    const extrasFormArray = this.carForm.get('extras') as FormArray;
    const extras = extrasFormArray.value;
    if (index < extras.length - 1) {
      const newExtras = this.swap(extras, index, index + 1); 
      extrasFormArray.setValue(newExtras);
    }
  }

swap function:

  swap(arr: any[], index1: number, index2: number): any[] {
    arr = [...arr];
    const temp = arr[index1];
    arr[index1] = arr[index2];
    arr[index2] = temp;
    return arr;
  }

demo: https://stackblitz.com/edit/angular-bhcdcf

EDIT: Actually we can simplify that to single function

  swap(index1: number, index2: number) {
    const extrasFormArray = this.carForm.get('extras') as FormArray;
    const extras = [...extrasFormArray.value];
    if (index2 > 0 && index1 < extras.length - 1) {
      [extras[index1], extras[index2]] = [extras[index2], extras[index1]];
      extrasFormArray.setValue(extras);
    }
  }

which would be called with appropriate indexes

  <button (click)="swap(i - 1, i)"> UP </button>
  <button (click)="swap(i, i + 1)"> DOWN </button>

demo: https://stackblitz.com/edit/angular-9gifvd

EDIT 2 by Aeseir:

Further simplification and following DRY principle (at least attempting to):

get extras(): FormArray {
  return this.carForm.get('extras') as FormArray;
}


moveUp(index: number) {
  var extraTmp = this.extras.at(index);
  this.removeExtra(index);
  this.extras.insert(index-1, extraTmp);
}

moveDown(index: number) {
  var extraTmp = this.extras.at(index-1);
  this.removeExtra(index-1);
  this.extras.insert(index, extraTmp);
}

removeExtra(index: number) {
  this.extras.removeAt(index);
}