angular - Angular Reactive Forms でネストされた FormArrays を使用してオブジェクトを FormGroup に変換します

Question

次のようなキー値として配列を含む非常に複雑な json オブジェクトをバックエンドから取得しています。

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

このオブジェクトをリアクティブ フォームに入力する必要があります。したがって、私の ngOnInit 関数では、フォームを初期化し、サービスから配列データを取得します。次に、このデータを「convertToFormGroup」関数に渡して、単純なオブジェクトからこのネストされた FormArrays を作成します。この関数の問題は、これが 1 レベルの深さでしか機能しないことです。API は将来変更される可能性があり、FormArray 内に別の FormArray が必要になるのではないかと心配しています。これは完全に間違ったアプローチだと思いますか？そして、ネストされた配列を持つオブジェクトを、ネストされた FormArray を持つ 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);
}