使用Angular反应形式中的嵌套FormArray将对象转换为FormGroup

时间:2018-07-04 09:05:10

标签: angular angular-reactive-forms formarray formgroups

我正在从后端获取非常复杂的json对象,该对象包含像这样的键值的数组:

[
  id: 1
  persons: [
    {
      name: 'Name',
      property: [ ..... ]
    }
    .........
  ]
]

我需要将此对象填写到我的反应式表单中。因此,在我的ngOnInit函数中,我初始化表单并从服务中获取数组数据。然后,我将此数据传递给'convertToFormGroup'函数,以从简单对象创建此嵌套FormArray。此功能的问题在于,它只能深入一层。恐怕api将来可能会更改,并且在FormArray中需要另一个FormArray吗?我认为这是完全错误的做法?而且这应该更容易将带有嵌套数组的对象转换为带有嵌套FormArrays的FormGroup。我们是否有一些现有功能?我是Angular的新手,所以请不要犹豫批评我。

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

  this.service.getData().subscribe(data => {
    const convertedData = convertToFormGroup(data);
    (this.form.get('data') as FormArray).push(convertedData);
  });
}

private convertToFormGroup(object) {
  const newObj = {};
  Object.keys(object).map(key => {
    if (Array.isArray(object[key])) {
      newObj[key] = this.fb.array([]);
      for(const value of object[key]) {
        newObj[key].push(this.fb.group(value));
      }
    } else {
      newObj[key] = object[key];
    }
  });
  return this.fb.group(newObj);
}

0 个答案:

没有答案