Работа с реактивной формой с использованием angular 10

#angular #angular8 #angular-reactive-forms #angular10

#angular #angular8 #angular-реактивные формы #angular10

Вопрос:

Я работаю над приложением, использующим angular 10 с реактивной формой. Мой сценарий заключается в том, что у меня есть родительская форма, в которой я использую массив форм, который поставляется со списком записей. Проблема, с которой я сталкиваюсь, заключается в том, что когда я консольно регистрирую this.ParentForm, он отлично загружает значения массива Form, но когда я использую this.ParentForm.value, он изменяет значение в массиве Form с 1600 на 160. Вот изображения и методы formbuilder, над которыми я работаю. Единственная проблема, с которой я сталкиваюсь, — это общий вес.

 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;
 

введите описание изображения здесь

введите описание изображения здесь

Ответ №1:

невозможно понять, что произойдет. Проблема в том, что вы меняете значение. Где?

КСТАТИ. нет необходимости создавать FormControl для «totalWeigth», вы всегда можете написать в своем .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)}}
 

Комментарии:

1. второй вариант был предоставлен @AshotAleqsanyan, спасибо, я не знал этого второго способа

2. Eliseo нет проблем, рад помочь. Да, я согласен с вами, он где-то в проекте меняет управляющее значение