更改 Angular formGroup 控件的顺序

Question

我正在构建一个 Angular 应用程序，它通过

formgroup object

动态呈现表单，如下所示：

    <div *ngFor="let controlName of updateValuesForm.controls | keys">
      <input [formControlName]=controlName type="text" class="edit-template-input" />
    </div> 

但是在某些情况下，我想在我的 formgroup 对象中交换这些控件中两个的顺序。 Angular

formgroup object

可以吗？

Answer 1

一般来说，Javascript 中的对象没有顺序，而且对它们来说没有顺序。

您可以使用 FormArray，它内部有一个数组来保存控件并以这种方式更改顺序。

或者，如果您真的想用对象来完成此操作，您可能必须将控件存储在数组中并以这种方式更改顺序。

Answer 2

A

FormGroup

内部是一个对象，因此没有固有的顺序。

如果您将控件放在

FormArray

中，您将能够使用控件的索引更改控件的顺序。

您可以使用

insert

removeAt

和

push

等方法通过数组索引相应地操作

FormArray

中控件的顺序。

Answer 3

我用了一个不太聪明但有效的方法，把底线放在名字和你想要的顺序的上面

this.formBuilder.group({
   A : ....,
   B : ...
})

更改为

this.formBuilder.group({
   _1_A : ....,
   _2_B : ...
})

Answer 4

FormGroup

的控件可以按所需顺序复制。

原订单：

this.form.controls = {
  A: ...,
  Z: ...,
  B: ...
}

所需订单：

this.form.controls = {
  A: this.form.controls.A,
  B: this.form.controls.B,
  Z: this.form.controls.Z
}

在 chrome、firefox 和 safari 中进行了测试。

Answer 5

6 年后，

formGroup.controls

的顺序是相关的，因为“高性能反序列化”需要像

$type

这样的元数据字段位于序列化 json 的顶部。

但是

value

返回

formGroup.controls

的顺序。 因此，要对控件进行排序并将所有元数据字段（以

$

开头）放在顶部，您可以执行以下操作：

import { FormGroup } from '@angular/forms';

export function sortFormGroupControls(formGroup: FormGroup): void {
    const controls = { ...formGroup.controls };
    const sortedKeys = Object.keys(controls).sort((a, b) => {
        return a.localeCompare(b);
    });

    Object.keys(controls).forEach(key => {
        formGroup.removeControl(key);
    });

    sortedKeys.forEach(key => {
        formGroup.addControl(key, controls[key]);
    });
}