更改 Angular 窗体组控件的顺序

Question

我正在构建一个 Angular 应用程序，该应用程序通过formgroup object动态呈现表单，如下所示：

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

但是，在某些情况下，我想在我的窗体组对象中交换其中两个控件的顺序。角formgroup object可以吗？

Answer 1

一般来说，Javascript 中的 Object 没有顺序，它们没有意义。

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

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

Answer 2

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中测试。