We would like to consume child reactive form data from parent when we click on parent button. Currently we are using viewchild for getting the child cpomponent reference. We are getting all static data but not the form filled data.......................................................................................................

parentponent.ts
@ViewChild(DetailsComponent) childrenComponent: childrenComponent;

save(){
let model=this.childrenComponent.buildDetailsModel();
/*here api to save model*/
}
childrenponent.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>

We would like to consume child reactive form data from parent when we click on parent button. Currently we are using viewchild for getting the child cpomponent reference. We are getting all static data but not the form filled data.......................................................................................................

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

save(){
let model=this.childrenComponent.buildDetailsModel();
/*here api to save model*/
}
children.ponent.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>

• javascript
• angular
• angular-reactive-forms
• angular7

Share Improve this question Follow edited Dec 27, 2018 at 15:01 Venkat Kondapaneni asked Dec 27, 2018 at 14:51 Venkat KondapaneniVenkat Kondapaneni 33944 silver badges66 bronze badges 2

• can you share your html code as well. – Chellappan வ Commented Dec 27, 2018 at 14:53
• can you check once – Venkat Kondapaneni Commented Dec 27, 2018 at 14:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Wrap your child form Inside form element so that you can submit your child form from parent, Then Inject FormGroupDirective in child ponent to get ref of parent form

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

Then use controlContainer to provide the existing FormGroupDirective in child ponent

childponent.ts

  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: ""
    }))

  }

child.ponent.html

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

Example:https://stackblitz./edit/angular-xusdev

If use a "referenceVariable" you will have access to all the public variables and functions of the "child"

<button (click)="click(mychild)"></button>
<child #mychild></child>

click(mychild.any)
{
   console.log(mychild.detailsForm);
}

Anyway, I think you want a child that belongs to a Form. For this, you can use viewProviders in child.

viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]

As this link show