Angular 提交表单时在父组件中集成子组件formgroup

我有一个父组件表单（day planner）和一个子组件（travel planner）集成在父组件中，它们都是使用反应式角度表单构建的。单击“发布”按钮时，需要将子窗体中的字段添加到父组件中。这两个表单都有单独的表单组，可以进行迭代。我尝试使用ViewChildren decorator，但无法在控制台中记录子窗体的详细信息，请告诉我您的建议

下面是我的示例代码：

父窗体HTML：

<form class="default" novalidate (ngSubmit)="publish()" [formGroup]="overallForm">
      <div formArrayName="formDetails">
        <div [formGroupName]="i" *ngFor="let formDetail of formDetails.controls; let i=index">
          <div id="{{ 'dayId' + i }}">
            Day {{i+1}}
          </div>      
              <label [attr.for]="i">Date: </label>
                <input type="date" id="{{'dateId'}}" formControlName="date">         
              <app-travel-leg></app-travel-leg>
            <app-activity-leg></app-activity-leg>       
        </div>
      </div>
       <button class="btn btn-outline-primary" type="button"(click)="addDay()">Add Day</button>
      <button type="button" class="btn btn-primary"(click)="publish()">Publish</button>
      <button type="button" class="btn btn-primary"  (click)="cancel()">Cancel</button>
 </form>

---

通过@Input将formGroup从父级传递给子级，然后添加所需的字段。

export class FormCreationComponent implements OnInit, AfterViewInit {
  overallForm: FormGroup;
  overall=new overAll;
  form:overAll
  @ViewChildren(TravelLegComponent) childComponent1: QueryList<TravelLegComponent>;
  constructor(private router: Router, private ob: FormBuilder, 
    private formCreationService: FormCreationService) { }
  cancel() {
    this.router.navigate(['Home'])
  }
  ngAfterViewInit(){
  }
  ngOnInit(): void {
    this.overallForm = this.ob.group({
      title: '',
      formDetails: this.ob.array([this.buildDetail()]) 
    }); 
  } 
  get formDetails(): FormArray {
    return this.overallForm.get('formDetails') as FormArray;
  }
  addDay(): void {
    this.formDetails.push(this.buildDetail());
  }
  
  buildDetail(): FormGroup {
    return this.ob.group({
      date: '',
    });
  }
  publish() {
    console.log('Saved: ' + JSON.stringify(this.overallForm.value));
  }
}

<form class="default" novalidate
  [formGroup]="travelForm">
  <div formArrayName="travellerDetails">
    <div class="container">
    <div [formGroupName]="i"
              *ngFor="let travellerDetail of travellerDetails.controls; let i=index">
              <div id="{{ 'travelId' + i }}">
                Travel Detail {{i+1}}
              </div>
          <label [attr.for]="i">From:</label>
                <input type="text" class="form-control" id="{{ 'startId' + i }}"
                placeholder="Travelling From"
                formControlName="start">
                
            <label [attr.for]="i">To:</label>
                <input type="text" class="form-control" id="{{ 'reachId' + i }}" 
                formControlName="reach"
                placeholder="Travelling To">
    </div>
 </div>
    <button class="btn btn-outline-primary"type="button" (click)="addDetail()"> Add Traveller Details </button>
</form>

export class TravelLegComponent implements OnInit {
  travelForm: FormGroup;
  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.travelForm = this.fb.group({
      travellerDetails: this.fb.array([this.buildDetail()])
    }); 
  }
  get travellerDetails(): FormArray {
    return this.travelForm.get('travellerDetails') as FormArray;
  }
  addDetail(): void {
    this.travellerDetails.push(this.buildDetail());
  }
  buildDetail(): FormGroup {
    return this.fb.group({
      start: '',
      reach: ''
    });
  }
}