更改 Angular formGroup 控件的顺序

Question

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

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

但是，在某些情况下，我想在我的表单组对象中交换其中两个控件的顺序。 Angular formgroup object 有可能吗？

Answer 1

通常，Javascript 中的 Object 没有顺序，它们没有顺序。

您可以使用 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 中测试。

更改 Angular formGroup 控件的顺序

Changing order of Angular formGroup controls

angular

angular-forms