title: Angular reactive nested forms
body: <p>I am trying to nest multiple reactive forms in my angular project and there forms are in different components.</p>
  
  <p>For example I have a component that contains a form with two inputs one input for name and one input for description and a submit button. I call this component <code>NameDescComponent</code></p>
  
  <p>I am planning to use this component across multiple pages and forms. Here is the html for the component.</p>
  
  <pre><code>&lt;form [formGroup]="nameDescForm" (ngSubmit)="customEmit()"&gt;
      &lt;div fxLayout="row" fxLayoutGap="10px" fxFlex&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput placeholder="Name" formControlName="name"&gt;
        &lt;/mat-form-field&gt;
        &lt;mat-form-field fxFlex&gt;
          &lt;input matInput placeholder="Description" formControlName="description"&gt;
        &lt;/mat-form-field&gt;
      &lt;/div&gt;
      &lt;div fxLayout="column" fxLayoutGap="10px"&gt;
        &lt;button type="submit" mat-raised-button color="primary"&gt;
          {{buttonText}}
        &lt;/button&gt;
        &lt;div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>And here is the abbreviated ts file</p>
  
  <pre><code>public nameDescForm: FormGroup;
  
  
  
  @Input() public buttonText: string;
    @Output() public save: EventEmitter&lt;any&gt; = new EventEmitter&lt;any&gt;();
    @Output() public nameDescFormEmit: EventEmitter&lt;FormGroup&gt; = new EventEmitter&lt;FormGroup&gt;();
  
    constructor(fb: FormBuilder) {
      this.nameDescForm = fb.group({
        'name': ['', Validators.required],
        'description': ['']
      });
    }
  
    public ngOnInit() {
      console.log(this.nameDescForm);
      this.nameDescFormEmit.emit(this.nameDescForm);
    }
  
    public customEmit() {
      this.save.emit();
    }
  </code></pre>
  
  <p>Then in a page where I am using this component I also have another form with the <code>NameDescComponent</code> inside the form, like this</p>
  
  <pre><code>&lt;form [formGroup]="parentForm" (ngSubmit)="customEmit()"&gt;
  
    &lt;app-name-description (nameDescFormEmit)="getNameDescForm($event)" buttonText="Save" (save)="save()"&gt;&lt;/app-name-description&gt;
  
    &lt;input type="test" formControlName="test"&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Currently what I am doing is passing the <code>nameDescFrom</code> from its component to the <code>ParentComponent</code> with the Output and EventEmitter. This solution seems to work and when I update child I am able to access the values. But the downside is when I go to submit the form I have to check that the <code>parentForm</code> and then <code>nameDescFrom</code> are both valid and manage both forms separately. </p>
  
  <p>I am wondering if there is a better way to approach this? When I can access the <code>nameDescFrom</code> from within the parent form?</p>
  
  <p>Thanks</p>