Javascript 如何在不使用服务的情况下在子组件到父组件之间传递反应式表单数据

我们希望在单击“父”按钮时使用来自父级的子反应式表单数据。目前，我们正在使用viewchild获取子CpComponent引用。我们得到的是所有静态数据，但不是表单填充的数据

parent.component.ts
@ViewChild(DetailsComponent) childrenComponent: childrenComponent;

save(){
let model=this.childrenComponent.buildDetailsModel();
/*here api to save model*/
}
children.component.ts
buildDetailsModel(): Details {
var a = {
  reportedToId: this.detailsForm.get('reportedTo').value,
  reportedOn: this.detailsForm.get('reportedTime').value,
  identifiedById: this.detailsForm.get('identifiedBy').value,
  identifiedOn: this.detailsForm.get('dateAndTimeIdentified').value,
  locationTypeId: this.detailsForm.get('locationType').value,
  addressId: this.detailsForm.get('locationAddress').value,
  AddressLine: this.detailsForm.get('locationOfAddress').value,
  description: this.detailsForm.get('description').value,
  PeopleExposed: this.dataSource
  };
  return a;
}

parent.html 
<child></child>

child.html
<form [formGroup]="detailsForm">
  <div fxLayout="column wrap" fxLayoutGap="12px">

    <div fxLayout="column" fxLayout.lt-sm="column" fxLayout.lt-md="column" 
   fxLayoutGap="24px">

      <div fxFlex="row" fxLayoutGap="24px" fxLayout.lt-md="column">
        <div fxFlex="column">
          <mat-form-field>
            <mat-label>Reported To</mat-label>
            <mat-select matInput formControlName="reportedTo">
              <mat-option value="Test 1">Test 1</mat-option>
              <mat-option value="Test 2">Test 1</mat-option>
            </mat-select>
          </mat-form-field>


          <mat-form-field>
            <input matInput [matDatepicker]="reportedTime" placeholder="Date 
          and time reported" date="true" time="true" 
          formControlName="reportedTime">
            <mat-datepicker-toggle matSuffix [for]="reportedTime"></mat- 
           datepicker-toggle>
            <mat-datepicker #reportedTime></mat-datepicker>
          </mat-form-field>

          <mat-form-field>
            <mat-label>Identified by</mat-label>
            <mat-select matInput formControlName="identifiedBy">
              <mat-option value="Test 1">Test 1</mat-option>
              <mat-option value="Test 2">Test 1</mat-option>
            </mat-select>
          </mat-form-field>
        </div>

parent.component.ts
@ViewChild（DetailsComponent）childrenComponent:childrenComponent；
保存（）{
让model=this.childrenComponent.buildDetailsModel（）；
/*这里是保存模型的api*/
}
children.component.ts
buildDetailsModel（）：详细信息{
变量a={
reportedToId:this.detailsForm.get（'reportedTo'）.value，
reportedOn:this.detailsForm.get（'reportedTime'）.value，
identifiedById:this.detailsForm.get（'identifiedBy'）.value，
identifiedOn:this.detailsForm.get（'dateAndTimeIdentified'）.value，
locationTypeId:this.detailsForm.get（'locationType'）.value，
addressId:this.detailsForm.get（'locationAddress'）.value，
AddressLine:this.detailsForm.get（'locationOfAddress'）.value，
description:this.detailsForm.get（'description'）.value，
PeopleExposed:this.dataSource
};
返回a；
}
parent.html
child.html
报告给
测试1
测试1
鉴定人
测试1
测试1

如果使用“referenceVariable”，您可以访问“child”的所有公共变量和函数

---

如图所示

将子表单包装在表单元素中，这样您就可以从父表单提交子表单，然后在子组件中注入FormGroupDirective以获取父表单的ref

<form (ngSubmit)="save()" [formGroup]="detailsForm"> 
    <app-child></app-child>
    <button type="button">Save</button>
 </form>

child.component.html

<form formGroupName="child">
  <input formControlName="name">
  <input formControlName="email">
</form>

---

示例：

您是否也可以共享您的html代码。您是否可以检查这是否有效。。但是如何获取其他属性（表单字段除外）？因为我们在子组件中也使用了被动表单字段和模板驱动的表单字段。

<form (ngSubmit)="save()" [formGroup]="detailsForm"> 
    <app-child></app-child>
    <button type="button">Save</button>
 </form>

  form;
  constructor(private fb: FormBuilder, @Host() private parentFor: FormGroupDirective) { }

  ngOnInit() {
    this.form = this.parentFor.form;
    //Add FormControl as per your need
    this.form.addControl('child', this.fb.group({
      name: "",
      email: ""
    }))

  }

<form formGroupName="child">
  <input formControlName="name">
  <input formControlName="email">
</form>