反应形式：数组属性被转换为对象

Question

问题可以在 this stackblitz 中看到：

我有一个负载：

payload = {
  id: 1,
  name: 'This is the payload',
  children: [
    { id: 1, name: 'Child 1' }
  ],
};

我用它创建了一个表单组：

this.form = this.fb.group(this.payload);

然后我显示表格的值：

{{ form?.value | json }}

结果是：

{ "id": 1, "name": "This is the payload", "children": { "id": 1, "name": "Child 1" } }

如您所见，children 属性从一个数组变成了一个对象。

这是怎么发生的？
是否可以阻止 Angular 这样做？
如果我需要使用 formArray，有没有办法让它自动进行？

Answer 1

您应该声明一个数组的数组，因为组将数组作为参数 [value, ...validators] :

payload = {
    id: 1,
    name: 'This is the payload',
    children: [[
      { id: 1, name: 'Child 1' },
    ]],
  };

根据angular.io声明一个数组值：

this.fb.group({
   anArray: [[]]
});

// OR
this.fb.group({
   anArray: this.fb.array([])
});

// OR
this.fb.group({
   anArray: new FormControl([])
});

如果您想制作动态表单，请查看 this angular.io page。

反应形式：数组属性被转换为对象

Reactive Forms : array property being transformed to object

angular

angular-forms

反应形式：数组 属性 被转换为对象

Reactive Forms : array property being transformed to object

angular

angular-forms

反应形式：数组属性被转换为对象