角 2 |具有动态构建组件的反应形式的嵌套数组

Question

我想在 Angular 2 中构建一个反应式表单并动态构建表单组件。我找到了一些很棒的教程，介绍了如何使用简单的表单来做到这一点：

https://toddmotto.com/angular-dynamic-components-forms

https://juristr.com/blog/2017/10/demystify-dynamic-angular-forms/

但是当数据模型包含字符串或对象数组时，我似乎无法弄清楚如何实现这一点。例如，考虑以下结构的对象：

{
  'name': 'Big Name Hotel',
  'tags': [
    'clean',
    'cozy',
    'cheap'
  ],
  'locations': [
    {
      'city': 'Denver',
      'state': 'CO',
    },
    {
      'city': 'San Francisco',
      'state': 'CA',
    },
    {
      'city': 'Los Angeles',
      'state': 'CA',
    }
  ]
}

我可以使用上面的教程之一为 name 元素构建一个动态表单组件，但是如何使它与字符串数组（标签）和对象数组（位置）一起工作？

=== 编辑更多内容 ===

这是其中一个教程的配置数据结构：

  config = [
    {
      type: 'input',
      label: 'Full name',
      name: 'name',
      placeholder: 'Enter your name',
    },
    {
      type: 'select',
      label: 'Favourite food',
      name: 'food',
      options: ['Pizza', 'Hot Dogs', 'Knakworstje', 'Coffee'],
      placeholder: 'Select an option',
    },
    {
      label: 'Submit',
      name: 'submit',
      type: 'button',
    },
  ];

字符串数组或对象数组的数据结构是什么样的？

Answer 1

我认为（现在无法测试）您可以将数组映射到 FormArray。

const form = new FormGroup({
   tags : new FormArray(tags.map(tag => new FormControl(tag)))
});

Answer 2

使用 FormBuilder，

constructor(
    private fb: FormBuilder
  ) { }


  createForm() {
    ...

   this.form= this.fb.group({
         name: [this.data.name],
         ...
        locations: this.fb.array([])
   });

    const locationsFGs = this.data.locations.map(loc=> {
      return this.fb.group({
        city: [loc.city, Validators.required],
        state: [loc.state],
      });
    });
    const locationsFormArray: FormArray = this.fb.array(locationsFGs );
    this.form.setControl('locations', locationsFormArray);
  }