title: Angular add FormGroup to FormGroup
body: <p>I have a parent component which is the main <code>FormGroup</code>. Inside this <code>&lt;my-parent&gt;&lt;/my-parent&gt;</code> component I have a child component, <code>&lt;my-child&gt;&lt;/my-child&gt;</code>. </p>
  
  <p>The child component has a <code>*ngIf="some-conditional"</code>, and inside the child component, I have a quick fill button which basically does <code>patchValue</code> on a couple 
   of the child <code>FormGroup</code> controls.</p>
  
  <p>It successfully adds the child <code>FormGroup</code> to parent <code>FormGroup</code>, but the values of the child inside of the parent are always empty.</p>
  
  <p>I've tried to add the controls two ways(both unsuccessful), with a setter inside the parent component, and by emitting from inside the child component and reassigning the new value to the parent <code>FormGroup</code>.</p>
  
  <p>Here's a <a href="https://stackblitz.com/edit/parent-with-child-form-groups?file=src%2Fapp%2Fchild.component.ts" rel="noreferrer">stackblitz</a> with a demo of what im trying to do. Thanks in advance!</p>
  
  <pre class="lang-js prettyprint-override"><code>// PARENT COMPONENT
  
  import {
    Component,
    ViewChild
  } from '@angular/core';
  import {
    FormBuilder,
    FormGroup,
    Validators
  } from '@angular/forms';
  
  import {
    ChildComponent
  } from './child.component';
  
  @Component({
    selector: 'my-parent',
    templateUrl: './parent.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class ParentComponent {
    isChildFormSet = false;
    showChildComponent = false;
    exampleParentForm: FormGroup;
  
    // @ViewChild(ChildComponent)
    // set userForm(childForm: ChildComponent) {
    //   if (childForm &amp;&amp; !this.isChildFormSet) {
    //     this.isChildFormSet = true;
    //     setTimeout(() =&gt; {
    //       this.exampleParentForm.addControl('child', new FormGroup(childForm.exampleChildForm.controls));
    //     });
    //   }
    // }
  
    constructor(private fb: FormBuilder) {
      this.exampleParentForm = this.fb.group({
        parent: ['', Validators.required]
      })
    }
  
    submitForm(): void {
      console.log(this.exampleParentForm)
    }
  
    addChildComponent(): void {
      this.showChildComponent = true;
    }
  
    onChange(form) {
      // reset the form value to the newly emitted form group value.
      this.exampleParentForm = form;
    }
  }
  
  
  // CHILD COMPONENT
  
  import {
    Component,
    OnInit,
    Input,
    Output,
    EventEmitter
  } from '@angular/core';
  import {
    FormBuilder,
    FormGroup,
    Validators
  } from '@angular/forms';
  
  @Component({
    selector: 'my-child',
    templateUrl: './child.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class ChildComponent implements OnInit {
    exampleChildForm: FormGroup;
  
    @Input() formData: FormGroup;
    @Output() onFormGroupChange: EventEmitter &lt; FormGroup &gt; = new EventEmitter &lt; FormGroup &gt; ();
  
  
    constructor(private fb: FormBuilder) {}
  
    ngOnInit() {
      this.exampleChildForm = this.fb.group({
        child: ['', Validators.required]
      });
  
      this.addGroupToParent();
    }
  
    fillWithText() {
      this.exampleChildForm.patchValue({
        child: 'This is an exmple.'
      });
    }
  
    clearText(): void {
      this.exampleChildForm.get('child').setValue('');
    }
  
    private addGroupToParent(): void {
      this.formData.addControl('child', new FormGroup(this.exampleChildForm.controls));
      this.onFormGroupChange.emit(this.formData);
    }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- PARENT COMPONENT --&gt;
  
  &lt;div class="parent-container"&gt;
    &lt;form [formGroup]="exampleParentForm" (submit)="submitForm()" novalidate&gt;
      &lt;div class="col-3"&gt;
        &lt;input class="effect-1" type="text" placeholder="Parent Input" formControlName="parent" /&gt;
        &lt;span class="focus-border"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;my-child *ngIf="showChildComponent" [formData]="exampleParentForm" (onFormGroupChange)="onChange($event)"&gt;
      &lt;/my-child&gt;
      &lt;div&gt;
        &lt;button class="button parent" type="submit"&gt;Log Form Value&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
    &lt;button class="button small" type="button" (click)="addChildComponent()"&gt;Add Child Component&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;!-- CHILD COMPONENT --&gt;
  
  &lt;div class="child-container" [formGroup]="exampleChildForm"&gt;
    &lt;div class="col-3"&gt;
      &lt;input class="effect-1" type="text" placeholder="Child Input" formControlName="child"&gt;
      &lt;span class="focus-border"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;button class="button child" type="button" (click)="fillWithText()"&gt;Patch Value&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>