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

typescript

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

Angular中的FormArray是一个强大的工具，用于管理表单中的动态控件集合。有时候，我们可能需要对FormArray中的项目进行重新排序以满足特定需求。在本文中，我们将探讨如何通过Angular实现对FormArray中项目的重新排序，并提供一个简单的案例代码来演示这个过程。

## 理解FormArray

在开始之前，让我们简要回顾一下FormArray是什么。FormArray是Angular中的一个类，用于表示表单中的动态控件数组。它是一个FormGroup的数组，每个FormGroup都代表一个控件。

typescript
import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-root',
  template: <code>
    <form [formGroup]="myForm">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
          <input formControlName="name" />
        </div>
      </div>
    </form>
  </code>,
})
export class AppComponent {
  myForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      items: this.fb.array([
        this.fb.group({
          name: 'Item 1',
        }),
        this.fb.group({
          name: 'Item 2',
        }),
        // ... more items
      ]),
    });
  }
  get items(): FormArray {
    return this.myForm.get('items') as FormArray;
  }
}

在上述代码中，我们创建了一个包含动态控件的FormArray。每个控件都有一个名为"name"的FormControl。现在，让我们看看如何对这些项目进行重新排序。

## 对FormArray中项目的重新排序

要对FormArray中的项目进行重新排序，我们可以使用Angular的move方法。这个方法可以在FormArray中重新排列控件的顺序。

typescript
// 在组件类中添加一个方法来重新排序项目
reorderItems(oldIndex: number, newIndex: number): void {
  const control = this.items.at(oldIndex);
  this.items.removeAt(oldIndex);
  this.items.insert(newIndex, control);
}

在上述代码中，reorderItems方法接受两个参数：oldIndex和newIndex。它首先从旧位置删除控件，然后在新位置插入控件，从而实现重新排序的效果。

## 示例代码

下面是一个简单的示例，演示了如何在Angular中对FormArray中的项目进行重新排序：

typescript
// 在组件类中添加一个方法来重新排序项目
reorderItems(oldIndex: number, newIndex: number): void {
  const control = this.items.at(oldIndex);
  this.items.removeAt(oldIndex);
  this.items.insert(newIndex, control);
}

html
<!-- 在模板中添加一个按钮，触发重新排序 -->
<button (click)="reorderItems(0, 1)">Reorder Items</button>

在上述代码中，我们在模板中添加了一个按钮，并通过点击按钮来触发reorderItems方法，将第一个项目移到第二个位置。您可以根据需要调整参数来重新排序项目。

通过这个简单的示例，我们展示了如何使用Angular对FormArray中的项目进行重新排序。这对于处理动态表单中的项目排序非常有用，使得我们能够更灵活地满足各种用户需求。希望这个文章能够帮助您更好地理解和使用Angular中的FormArray。