Reactive Forms：要转换为object的数组属性

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属性从数组转移到对象。

1. 那是怎么发生的？
2. 是否有可能阻止Angular这样做？
3. 如果我需要使用formArray，有没有办法让它自动化？

Answer 1

你应该声明一个数组数组，因为group将数组作为参数[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。