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

Question

我有一个包含一堆控件的大表单。在这个表单中，我有一组表单组，它们是我的“规则”。

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

这是我的设置:



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

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

对于响应式表单，表单组的索引是否决定了它在组件 UI 中的位置？例如，如果我想向上移动规则，我可以将该表单组索引更改为 currentIndex-1也许上面的规则是 +1为了换地方？

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

更新:

这是我的设置的一个plunker:

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

Answer 1

FormArray上有几种方法喜欢 removeAt和 insert这可以帮助您实现目标。

模板.html

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

组件.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