时间戳

首页 > 解决方案 > 使用 Angular 10 处理反应形式

angular - 使用 Angular 10 处理反应形式

问题描述

我正在使用具有反应形式的 angular 10 开发应用程序。我的场景是我有父表单，我在其中使用带有记录列表的表单数组。我面临的问题是当我控制台记录 this.parentForm 然后它完美地加载表单数组值但是当我使用 this.parentForm.value 然后它将表单数组中的值从 1600 更改为 160。这是图像和我正在研究的表单构建器方法。我面临的唯一问题是总重量。

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;

在此处输入图像描述

在此处输入图像描述

标签： angularangular8angular-reactive-formsangular10

解决方案

不可能知道发生了什么。问题是你改变了价值。在哪里？

顺便提一句。没有必要为“totalWeigth”创建一个 FormControl，你总是可以在你的 .html 中写一些像

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

其中“i”是 formArray 的索引

或者

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

推荐阅读