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

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

如果您将控件放在FormArray中，则可以使用索引更改控件的顺序。

您可以使用insert removeAt和push等方法来相应地操纵FormArray中控件的顺序。

Answer 3

我使用了一种巧妙但有效的方法，将姓名的底行和所需的顺序放在顶部

O(1)

更改为

this.formBuilder.group({
   A : ....,
   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控件的顺序

4 个答案: