Angular 2动态表单实现项上下移动功能求助

嘿，这就帮你搞定动态表单里的项上下移动功能！我看你已经有了基础的动态表单和添加项的功能，现在只需要加两个移动方法，再在模板里配上按钮就行，具体步骤如下：

首先，在你的component.ts里，先给FormArray加个便捷的 getter，这样后续操作更方便：

get pipelineConfigsArray(): FormArray {
  return this.pipeLineForm.get('pipelineConfigs') as FormArray;
}

然后添加两个核心的移动方法——上移和下移，注意要同时同步表单的FormArray和你的pipelineConfigs数据数组，不然表单和数据会脱节：

// 上移指定索引的项
moveUp(index: number) {
  // 第一个项不能再往上移啦
  if (index === 0) return;
  
  // 交换FormArray里的控件
  const currentControl = this.pipelineConfigsArray.at(index);
  const prevControl = this.pipelineConfigsArray.at(index - 1);
  this.pipelineConfigsArray.setControl(index - 1, currentControl);
  this.pipelineConfigsArray.setControl(index, prevControl);
  
  // 同步你的数据数组
  const temp = this.pipelineConfigs[index];
  this.pipelineConfigs[index] = this.pipelineConfigs[index - 1];
  this.pipelineConfigs[index - 1] = temp;
}

// 下移指定索引的项
moveDown(index: number) {
  // 最后一个项不能再往下移啦
  if (index === this.pipelineConfigsArray.length - 1) return;
  
  // 交换FormArray里的控件
  const currentControl = this.pipelineConfigsArray.at(index);
  const nextControl = this.pipelineConfigsArray.at(index + 1);
  this.pipelineConfigsArray.setControl(index + 1, currentControl);
  this.pipelineConfigsArray.setControl(index, nextControl);
  
  // 同步你的数据数组
  const temp = this.pipelineConfigs[index];
  this.pipelineConfigs[index] = this.pipelineConfigs[index + 1];
  this.pipelineConfigs[index + 1] = temp;
}

接下来修改你的模板，在每个表单项的位置加上移动按钮，还要给按钮加禁用条件，避免无效操作：

<form [formGroup]="pipeLineForm">
  <div formArrayName="pipelineConfigs">
    <!-- 循环渲染每个表单项 -->
    <div *ngFor="let config of pipelineConfigsArray.controls; let i = index" [formGroupName]="i">
      <!-- 这里放你原本的表单项内容，比如输入框、选择器等 -->
      <input formControlName="yourFieldName" placeholder="输入配置内容">
      
      <!-- 移动按钮 -->
      <button type="button" (click)="moveUp(i)" [disabled]="i === 0">Move Up</button>
      <button type="button" (click)="moveDown(i)" [disabled]="i === pipelineConfigsArray.length - 1">Move Down</button>
    </div>
  </div>
  
  <!-- 你原本的添加项按钮 -->
  <button type="button" (click)="addPipelineConfig()">Add Item</button>
</form>

哦对了，如果你还没写addPipelineConfig方法，顺便给你补一下（假设你有initPipeLineItem方法用来创建单个表单组）：

addPipelineConfig() {
  // 往FormArray里加新的表单组
  this.pipelineConfigsArray.push(this.initPipeLineItem());
  // 同步数据数组
  this.pipelineConfigs.push(new PipelineConfigs()); // 或者根据你的数据结构初始化新对象
}

这样一来，点击Move Up/Down按钮就能交换项的位置，而且表单和数据会保持同步，完美解决你的需求！

内容的提问来源于stack exchange，提问作者AYa