Angular - 如何重新排序FormArray中的项目？

Question

我有一个包含大量控件的大表单。在这个表单中，我有一系列表单组，这些表单组是我的＆＃34;规则＆＃34;。

我需要添加更改规则顺序的功能，不仅是它的值，还包括它在DOM中的可视位置。

以下是我的设置：

这些规则中的每一个都是具有自己的表单组等的组件。它们最初显示的顺序基于它们当前存储的处理顺序值。

在每条规则下面，我都有一个向上或向下移动规则的按钮，这正是我正在处理的事情。

使用反应式表单，表单组的索引是否确定其在组件UI中的位置？例如，如果我想要移动规则，我是否可以将表单组索引更改为currentIndex-1，并将上面的规则更改为+1以更改位置？

我的目标是能够在UI上上下移动这些组件。由于此页面上有大量规则，我试图远离拖放库。

更新

以下是我的设置内容：

https://plnkr.co/edit/S77zywAa7l900F0Daedv?p=preview

Answer 1

这是“移动”方法的简短 es6 版本：

move(shift: number, i: number,): void {
    const { controls } = this.rulesForm.get('ruleData.rules');
    [ controls[i], controls[i+shift] ] = [ controls[i+shift], controls[i] ];
    this.rulesForm.patchValue(controls);
}

Plunker Example

Answer 2

FormArray上有几种方法，例如removeAt和insert，可以帮助您实现目标。

<强> template.html

<button class="button" (click)="move(-1, i)">Move Up</button> &nbsp; 
<button class="button" (click)="move(1, i)">Move Down</button>

<强> component.ts

move(shift, currentIndex) {
  const rules = this.rulesForm.get('ruleData.rules') as FormArray;

  let newIndex: number = currentIndex + shift;
  if(newIndex === -1) {
    newIndex = rules.length - 1;
  } else if(newIndex == rules.length) {
    newIndex = 0;
  }

  const currentGroup = rules.at(currentIndex);
  rules.removeAt(currentIndex);;
  rules.insert(newIndex, currentGroup)
}

<强> Plunker Example