Angular ReactiveForms не получает динамического значения

Отредактировано, в предыдущем коде есть {{ }}, но если мы используем [значение], вам не нужно ставить {{ }}, обновленный код

Вам не нужно, чтобы общее количество принадлежало formGroup

<input type="number" class="form-control" disabled
    [value]="phone.get('product_price').value *( phone.get('product_quantity').value)" >

в submit можно сделать карту, если считаете нужным

submit(form){
   if (form.valid)
   {
      let data={
             //all properties of for.value
             ...form.value,
             //but products was products "mappeated"
             products:form.value.products.map(v=>{
             return {
               //Which each product, return 
               ...v,   //all de properties of products +
               total:v.product_price*v.product_quantity  //total
          }})
        }

      console.log(data);
   }

У меня была аналогичная логика для реализации. Я сделал это в контроллере, используя что-то вроде этого:

ngOnInit() {
    this.formGroup = this.formBuilder.group({
        price: ['', [Validators.required]],
        quantity: ['', [Validators.required]],
        total: ''
    });

    this.formGroup.valueChanges.subscribe(change => {
        this.priceChanges()
    })
}

priceChanges() {
    let price = parseFloat(this.formGroup.value.price);
    let quantity = parseInt(this.formGroup.value.quantity);

    if (!isNaN(price) && !isNaN(quantity)) {
        let totalCost = (price * quantity).toFixed(2);
        this.formGroup.controls['total'].setValue(totalCost, { emitEvent: false })
    }
}

Отредактированная версия для обработки FormArray:

Обратите внимание на добавленный (ngModelChange)="detectValueChange(i)" к двум вашим входам:

<tbody formArrayName="products">
    <tr *ngFor="let phone of productForms.controls; let i=index" [formGroupName]="i">
        <th scope="row">{{i+1}}</th>
        <td> <input type="text" class="form-control" placeholder="Product Code" formControlName="product_code"></td>
        <td> <input type="text" class="form-control" placeholder="Product Name" formControlName="product_name"></td>
        <td><input type="number" class="form-control" placeholder="Price" formControlName="product_price" #price (ngModelChange)="detectValueChange(i)"></td>
        <td><input type="number" class="form-control" formControlName="product_quantity" value="1" #quantity (ngModelChange)="detectValueChange(i)"></td>
        <td><input type="number" class="form-control" value="{{(price.value || 0) * (quantity.value || 1)}}" formControlName="product_total" disabled></td>
    </tr>
</tbody>

Затем аналогично моему исходному решению, но теперь с индексацией массива 'products'.

detectValueChange(index: number){
    let controls = this.formGroup.get('products') as FormArray;
    this.changeTotal(controls[index])
}

changeTotal(control) {
    let price = parseFloat(control.value.product_price);
    let quantity = parseInt(control.value.product_quantity);
    if (!isNaN(price) && !isNaN(quantity)) {
        let totalCost = (price * quantity).toFixed(2);
        control['product_total'].setValue(totalCost, { emitEvent: false })
    }
}