title: How can i get FormArray input values in parent element?
body: <p>How can I get values (in reactive way) by FormArray if it is in the child component and my main form in the parent component.I solved this with FormGroupDirective by FormGroups but this doesnt work at FormArrays(or I dont know how its work :) ). My goal is when I type something in an input what in a FormArray(product array) is.It show up immediately in my main form object.
  Here is a StackBlitz link
  <a href="https://stackblitz.com/edit/angular-ivy-n3txbk?file=src/app/products/products.component.ts" rel="nofollow noreferrer">stackblitz</a></p>
  <p>app component:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
  })
  export class AppComponent implements OnInit {
    constructor(private formBuilder: FormBuilder) {}
  
    form: FormGroup;
  
    ngOnInit(): void {
      this.form = this.formBuilder.group({
        name: [''],
        sex: [''],
        infos: this.formBuilder.group({}),
        comments: this.formBuilder.array([]),
      });
    }
  }
  </code></pre>
  <p>Product component:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {
    FormArray,
    FormControl,
    FormGroup,
    FormGroupDirective,
  } from '@angular/forms';
  
  @Component({
    selector: 'app-products',
    templateUrl: './products.component.html',
  })
  export class ProductComponent implements OnInit {
    constructor(private formDirective: FormGroupDirective) {}
  
    productFormGroup: FormGroup;
  
    productForm: FormArray;
  
    ngOnInit(): void {
      this.handleFormGroup();
      this.productForm = this.formDirective.control.get('products') as FormArray;
    }
  
    handleFormGroup() {
      this.productFormGroup = new FormGroup({
        name: new FormControl(''),
        quantity: new FormControl(null),
        amountUnit: new FormControl(''),
      });
    }
  
  }
  </code></pre>
  <p>product html</p>
  <pre><code>&lt;form class=&quot;myform&quot; [formGroup]=&quot;productFormGroup&quot;&gt;
    &lt;mat-form-field &gt;
      &lt;mat-label&gt;name&lt;/mat-label&gt;
      &lt;input matInput formControlName=&quot;name&quot; /&gt;
    &lt;/mat-form-field&gt;
  
    &lt;mat-form-field &gt;
      &lt;mat-label&gt;qua&lt;/mat-label&gt;
      &lt;input matInput formControlName=&quot;quantity&quot; /&gt;
    &lt;/mat-form-field&gt;
  
    &lt;mat-form-field &gt;
      &lt;mat-label&gt;amount&lt;/mat-label&gt;
      &lt;input matInput formControlName=&quot;amountUnit&quot; /&gt;
    &lt;/mat-form-field&gt;
  
  
  &lt;/form&gt;
  </code></pre>