Reactive form group 的問題

General
1

我的code 就在這裡。
這張form 是reactive form, 裡面有3個form group:

  1. attributes
  2. callTree
  3. manuals

我想做到每一個form group 有獨立的valid attribute.
可是我發現我要在app.component.ts 裡面寫以下的code 來initialize 這3個 form group:

this.attributes = this.fb.group({
  'division': [this.callTreeEntry.division, Validators.required],
  'systemName': [this.callTreeEntry.systemName, Validators.required]
});
this.callTree=this.fb.group({
  'callTreeDetail':[this.callTreeEntry.callTree.callTreeDetail, Validators.required]
});
this.manuals=new FormArray([]);
for (let m of this.callTreeEntry.manuals) {
  const item=this.fb.group({
    'manualLocation':[m.manualLocation, Validators.required],
    'description':[m.description, Validators.required],
    'lastUpdateDate':[m.lastUpdateDate, Validators.required],
  });
  this.manuals.push(item);
}

我懷疑這些initialization 是不是應該在這些component 裡面做呢?
如果可以將這些initialization放在這些component 裡面做,那應該如何做呢?

2

要看你對於那些 component 的定義是怎麼看，寫在上層 component 或是裡面都可以

額外的參考閱讀

3

這個是不是你之前所說的Custom Form control 呢?

4

對，不論是 FormControl 或是 FormGroup. 這兩者本質上沒有差異太大.
但如果是我來看，我認為 FormGroup 初始化應該要跟著物件走，資料要另外塞