从父组件控制子组件的表单控件：反应形式

Question

我想在提交表单时创建一个像这样的JSON。

{
  id: ...
  someOtherKey:...., 
  subload: [
    {pick: 1,name:...},{drop:1, name:...}, {crossing:1, name:....},
    {pick: 1,name:...},{drop:1, name:...}, {crossing:1, name:....}
  }
}

我能够使用反应形式和角度的controlvalueaccorors创建以上结构。

拾取，放置和交叉是单独的组件，每当这些表单的值更改时，它们就会将值传播到父表单。

现在的问题是，在应用程序中，我想隐藏和显示拾取，放置和交叉中的某些元素。

this.loadAdvanceForm = this.fb.group({
      subloads: this.fb.array([this.loadSubloadDetails()]),
      billing: ['', Validators.required],
    });


loadSubloadDetails() {
   return this.fb.group({
      load_display_no: [''],
      pickup: this.fb.group({}),
      drop: this.fb.group({}),
      crossing: this.fb.group({})
     });
}

在选择组件中，我有选择表

this.pick = this.fb.group({
        pointId: [],
        id: [''],
        trailerSpecial: [''],
        trailer: [],
        description: [''],
        carrierCode: [''],
      });

问题是我想从父组件及其子对象访问子控件（拾取控件）并将其隐藏。

现在，如果我获得了值，但我没有获得控件。

this.loadAdvanceForm.get('subloads') as FormArray;
item.controls.forEach((element: FormGroup) => {
   // element.controls is empty object. 
 })

有一种方法可以访问父控制器中的子组件formcontrols。