javascript - Angular FormArray 内容顺序

Question

嗨，

我有以下设置:

App.Component.Ts 内容

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());
}

额外型号

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

现在假设我添加了 4 个新的 Extras，数组将如下所示:

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"

我希望能够以编程方式更改列出的 4 个项目的顺序。
假设我单击“Slick Rims”旁边的向上按钮，它将与“Rainbow Paint Job”项目交换位置。如果我再次按下它，它将与“Clearshield”交换位置，结果如下。

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"

如果我按下输入的向下按钮，原理相同。

任何想法如何实现这一点，我都在思考如何使用 FormArray 实现这一点。

Answer 1

假设您的表单数组在 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>

您可以创建 moveUp和 moveDown如果可能，函数在索引 (i-1, i) 或 (i, i+1) 处交换值

  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(arr: any[], index1: number, index2: number): any[] {
    arr = [...arr];
    const temp = arr[index1];
    arr[index1] = arr[index2];
    arr[index2] = temp;
    return arr;
  }

演示: https://stackblitz.com/edit/angular-bhcdcf

编辑:实际上我们可以将其简化为单个功能

  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);
    }
  }

将使用适当的索引调用

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

演示: https://stackblitz.com/edit/angular-9gifvd

Aeseir 编辑 2:

进一步简化并遵循 DRY 原则(至少尝试):

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);
}