Change positions of form array-CodePudding

I have a table where I show information from a form, and I have a button that adds a record, but when I generate the new element it takes the last position and I want it to take position 0 I tried using the splice function, but it didn't work, when I refresh the data source the positions still being the same before the splice

my form array
  myformArray = new FormArray([
    this.formBuilder.group({
      id: [0, Validators.required],
      empleado: ["Juan Antonio Vazquez", Validators.required],
      nss: ["ass5495d", Validators.required],
      capacitacion: ["SI", [Validators.required, Validators.email]]
    })
  ])

the adding the new record

  addRow() {
    let a =
      this.formBuilder.group({
        id: [1, Validators.required],
        empleado: ['', Validators.required],
        nss: ["", Validators.required],
        capacitacion: ["", [Validators.required, Validators.email]]
      })
    this.myformArray.push(a);
    let fromIndex = this.myformArray.value.indexOf(a.value);
    let toIndex = 0;
    let element = this.myformArray.value.splice(fromIndex, 1)[0];
 

    this.myformArray.value.splice(toIndex, 0, element);

    this.dataSource.data = this.myformArray.controls

  }

CodePudding user response：

With a little help from Materials cdkDrag you can use the moveItemInArray function. Look the code here.

Here is the function itself:

export function moveItemInArray<T = any>(array: T[], fromIndex: number, toIndex: number): void {
  const from = clamp(fromIndex, array.length - 1);
  const to = clamp(toIndex, array.length - 1);

  if (from === to) {
    return;
  }

  const target = array[from];
  const delta = to < from ? -1 : 1;

  for (let i = from; i !== to; i  = delta) {
    array[i] = array[i   delta];
  }

  array[to] = target;
}

Call it simple like moveItemInArray(this.myformArray, 0, 2). Have fun!

Note

The clamp function helps with a min/max value. So you cannot have a highter to param as the array.length is.

function clamp(value: number, max: number): number {
  return Math.max(0, Math.min(max, value));
}

CodePudding user response：

I'm not sure if this solves your problem, but if you want to insert an item at the beginning of an array, you can use the unshift method.

CodePudding user response：

I finally got it, I was changing the position of the form array value but I needed to change the position of the control instead

  addRow() {
    let a =
      this.formBuilder.group({
        id: [1, Validators.required],
        empleado: ['', Validators.required],
        nss: ["", Validators.required],
        capacitacion: ["", [Validators.required, Validators.email]]
      })
    this.myformArray.push(a);
    let fromIndex = this.myformArray.controls.indexOf(a);
    let toIndex = 0;
    let element = this.myformArray.controls.splice(fromIndex, 1)[0];


    this.myformArray.controls.splice(toIndex, 0, element);

    this.dataSource.data = this.myformArray.controls
  }