调整FormArray元素位置：新增记录需置于首位问题排查

我用FormArray渲染表格数据，点击添加记录按钮时，新增元素默认排在末尾，想把它放到索引0的位置。尝试用splice调整但没生效，刷新数据源后元素位置还是和调整前一致。

我的FormArray定义 #

myformArray = new FormArray([
  this.formBuilder.group({
    id: [0, Validators.required],
    empleado: ["Juan Antonio Vazquez", Validators.required],
    nss: ["ass5495d", Validators.required],
    capacitacion: ["SI", [Validators.required, Validators.email]]
  })
])

新增记录的代码 #

addRow() {
  let a =
    this.formBuilder.group({
      id: [1, Validators.required],
      empleado: ['', Validators.required],
      nss: ["", Validators.required],
      capacitacion: ["", [Validators.required, Validators.email]]
    })
  this.myformArray.push(a);
  let fromIndex = this.myformArray.value.indexOf(a.value);
  let toIndex = 0;
  let element = this.myformArray.value.splice(fromIndex, 1)[0];

  this.myformArray.value.splice(toIndex, 0, element);

  this.dataSource.data = this.myformArray.controls
}

问题原因 #

你操作的是myformArray.value，这只是FormArray对应的数据副本，不是实际存储控件的集合。修改value不会影响FormArray内部的控件顺序，所以刷新数据源后位置没变。

解决方法 #

方法一：直接用FormArray的insert方法（推荐） #

不用先push再调整，直接在索引0的位置插入新控件：

addRow() {
  const newRow = this.formBuilder.group({
    id: [1, Validators.required],
    empleado: ['', Validators.required],
    nss: ["", Validators.required],
    capacitacion: ["", [Validators.required, Validators.email]]
  });
  // 直接在索引0的位置插入新控件
  this.myformArray.insert(0, newRow);
  // 更新表格数据源
  this.dataSource.data = this.myformArray.controls;
}

方法二：调整controls数组顺序 #

如果一定要先push再调整，要直接操作controls数组而不是value：

addRow() {
  const newRow = this.formBuilder.group({
    id: [1, Validators.required],
    empleado: ['', Validators.required],
    nss: ["", Validators.required],
    capacitacion: ["", [Validators.required, Validators.email]]
  });
  this.myformArray.push(newRow);
  // 从controls数组末尾移除新添加的控件
  const removedControl = this.myformArray.controls.pop();
  // 插入到索引0的位置
  if (removedControl) {
    this.myformArray.controls.unshift(removedControl);
  }
  // 更新表格数据源
  this.dataSource.data = this.myformArray.controls;
}

FormArray的value是基于控件生成的只读数据视图，必须直接操作controls数组或者使用FormArray提供的insert、removeAt等方法管理控件顺序，这样表格的数据源才会同步更新。

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