时间戳

首页 > 解决方案 > 反应形式：数组属性被转换为对象

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

问题描述

这个问题可以在这个 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，有没有办法让它自动化？

标签： angularangular-forms

解决方案

您应该声明一个数组数组，因为 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([])
});

如果您想制作动态表单，请查看这个 angular.io 页面。

推荐阅读