Working with reactive form using angular 10

Question

I am working on application using angular 10 with reactive form. My scenario is I have parent form in which I am using Form array which came with list of records. The problem I am facing is when I console log this.parentForm then it loads the Form Array values perfectly but When I use this.parentForm.value then it changes the value with in the Form Array from 1600 to 160. Here are the images and formbuilder methods I am working on. The only problem I am facing is with total weight.

FormBuilder(){
    
    this.shippingParentForm = this.builder.group({
      requestTypeId: [ShippingRequest.boxescrates, [Validators.required],],
      shippingTypeId: [this.startupval, [Validators.required]],
      estimatedDate: [null, [Validators.required]],
      isCustomBrokerage: [false, [Validators.required]],
      isCustomBond: [false, [Validators.required]],
      isHazardous: [false],
      isShipper: [false],
      isPersonalShipment: [false],
      shippingdetails : this.builder.array([
        this.ValidatePalletShippingForm()
      ]),
      totalshippingdetails : this.builder.array([
        this.ValidateTotalShipmentForm()
      ]),
      pickupPoint : this.builder.group(
        {
          locationTypeId: [0, [Validators.required, Validators.min(this.startupval)]],
          countryName: [null, [Validators.required]],
          addressDetails: [null, [Validators.required]]
        }
      ),
      dropPoint : this.builder.group(
        {
          locationTypeId: [0, [Validators.required, Validators.min(this.startupval)]],
          countryName: [null, [Validators.required]],
          addressDetails: [null, [Validators.required]]
        }
      )
    });
    this.formValueChange();
  }




ValidatePalletShippingForm() : FormGroup{
    return this.builder.group({
       packageTypeId: [this.startupval],
       unit: [null, [Validators.required , Validators.min(this.startupval)]],
       length: [null, [Validators.required]],
       width: [null, [Validators.required]],
       height: [null, [Validators.required]],
       weight: [null, [Validators.required]],
       dimension: [0],
       weightunit: ['KG'],
       dimensionunit: ['CM'],
       totalcubicmeter: [null],
       totalweight: [null]
     });
   }



let model = this.shippingParentForm.value;

enter image description here

enter image description here

Answer 1

it's impossible know what happen. The problem is thay you change the value. Where?

BTW. it's not neccesary create a FormControl for "totalWeigth", you always can write in your .html some like

{{(+shippingParentForm.get('shippingdetails.'+i+'.weight').value)*
           (+shippingParentForm.get('shippingdetails.'+i+'.unit').value)}}

where "i" is the index of the formArray

or

 {{(+shippingParentForm.get(['shippingdetails', i, 'weight']).value) *
   (+shippingParentForm.get(['shippingdetails', i, 'unit']).value)}}