Угловой 4. FormControlName не работает обновление

Question

У меня есть массив форм с группами форм, которые состоят из объектов. Объекты инициализируются значениями, поэтому они отображаются в полях ввода, но также и в поле ввода. Я также заполняю значение свойства полей новыми значениями, и они также отображаются, что означает, что начальное значение объекта было изменено. Но теперь, когда я получаю свои значения элемента управления формы, я понял, что те, у которых уже были введены новые значения свойств, не заполняют formControlName, но когда я вручную изменяю значение в поле ввода, оно заполняет formControlName.

Здесь я инициализирую formValues

const transformedPurchaseOrderItems = this.purchaseOrderItemsDeliveryStatus.map(temp => {
            const purchaseOrderDeliveryStatus = new PODeliveryStatusJoined(
                                                    temp.deliveryStatusId,
                                                    temp.deliveryStatusAmountDelivered,
                                                    temp.deliveryStatusDefectedAmount,
                                                    temp.deliveryStatusDeliveredDate,
                                                    temp.deliveryStatusExpirationDate,
                                                    temp.deliveryStatusUndefectedAmount,
                                                    temp.deliveryStatusItemId,
                                                    temp.deliveryStatusIdSellingPrice,
                                                    temp.deliveryStatusAmountToRestock,
                                                    temp.restockedAmount,
                                                    temp.productName,
                                                    temp.quantity,
                                                    temp.unitPrice,
                                                    warehouseInitializedWord,
                                                    binlocationInitialize,
                                                    temp.remainingAmountToDeliver,
                                                    temp.productId);

            return this.formBuilder.group(purchaseOrderDeliveryStatus);
          });

          const purchaseOrderItemsArray = this.formBuilder.array(transformedPurchaseOrderItems);
          console.log('Testing the MIC', purchaseOrderItemsArray);
          this.setPurchaseProductItemArray(purchaseOrderItemsArray);
         });
          console.log('why' , this.undefectedAmount);
    }

     setPurchaseProductItemArray(purchaseOrderItemsArray) {
       // this.purchaseProductStatusControl.setValue(purchaseOrderItemsArray);

        this.purchaseOrderDeliveryStatusForm.setControl('purchaseProductStatus', purchaseOrderItemsArray);
        this.purchaseProductStatusControl = this.purchaseOrderDeliveryStatusForm.get('purchaseProductStatus') as FormArray;

     }

Это мой HTML

<tr *ngFor="let item of purchaseProductStatusControl.controls; let i = index;" [formGroupName]="i">
        <td>{{i+1}}</td>
        <td><input formControlName="productName" type="text" readonly></td>
        <td><input formControlName="unitPrice" type="number" readonly></td>
        <td><input #amount formControlName="quantity" type="number" [readonly]="true"></td>
        <td><input formControlName="deliveryStatusIdSellingPrice" type="number"></td>
        <td><input #amountDelivered formControlName="deliveryStatusAmountDelivered" type="number" min="0" max="{{amount.value}}"></td>
        <td><input formControlName="remainingAmountToDeliver" type="number" value="{{amount.value - amountDelivered.value}}" min="0"></td>
        <td><input #defectedAmount formControlName="deliveryStatusDefectedAmount" type="number"></td>
        <td><input #undefectedAmount formControlName="deliveryStatusUndefectedAmount" type="number" value="{{amountDelivered.value - defectedAmount.value}}" readonly></td>
        <td><input formControlName="restockedAmount" type="number" readonly></td>
        <td><input formControlName="deliveryStatusAmountToRestock" type="number" [value]="undefectedAmount.value"></td>
        <td><input formControlName="deliveryStatusDeliveredDate" type="date"></td>
        <td>

Таким образом, начальное значение для formControlName="Остаток AmountToDeliver" равно 0, но после значения вычисления ="{{amount.value - amountDelivered.value}}" оно равно 7, и 7 отображается в поле ввода, но не заполняется formControlName="Остаток AmountToDeliver", если я вручную изменить его в поле ввода

Я надеюсь, что смог объяснить. Пожалуйста, помогите мне