Question

我想在角度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);
  }

角2 |嵌套数组以活动形式与动态构建的组件

2 个答案: