title: Angular Reactiveforms dynamic data
body: <p>I am using formArray for my list of product. I want to get the <code>product_code</code>'s value in .ts just like [ngModel] and then manipulate the data. How to get the <code>product_code</code>'s value?</p>
  
  <pre><code>&lt;tbody formArrayName="products"&gt;
   &lt;tr *ngFor="let phone of productForms.controls; let i=index" [formGroupName]="i"&gt;
     &lt;th scope="row"&gt;{{i+1}}&lt;/th&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" placeholder="Product Code" formControlName="product_code"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" placeholder="Product Name" formControlName="product_name"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button type="button" class="btn btn-danger ml-2" (click)="deleteProduct(i)"&gt;Remove&lt;/button&gt;&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>.ts code:</p>
  
  <pre><code>ngOnInit() {
  const product = this.fb.group({
        product_code: [],
        product_name: [],
        product_price: [],
        product_quantity: [1],
        product_total: []
      });
  
   this.myForm = this.fb.group({
    products: this.fb.array([product]),
   }
  }
    get productForms() {
      return this.myForm.get('products') as FormArray;
    }
  
    addProduct() {
      const product = this.fb.group({
        product_code: [],
        product_name: [],
        product_price: [],
        product_quantity: [1],
        product_total: []
      });
  
      this.productForms.push(product);
    }
  
    deleteProduct(i) {
      this.productForms.removeAt(i);
    }
  </code></pre>
  
  <p>For more clarification see this:
  <a href="https://i.stack.imgur.com/xJfvn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xJfvn.png" alt="enter image description here"></a></p>
  
  <p>When i enter any number in the <code>product_code</code> field i need that value in .ts code which also handles the changes or say subscription.</p>
  
  <p>I want to get the <code>product_code</code> value, perform some function and assign the return value to <code>product_name</code>. I know how to achieve this using ngModel two way bindings, but how to do using FormControl or say Reactiveforms?</p>