There are 2 FormGroups named orderForm and parcelForm on a page. The parcelForm is generated dynamically within a FormArray. In the parcelForm, there are FormControls like net_weight and gross_weight, while the OrderForm has FormControls such as total_net_weight and total_gross_weight. I am trying to bind the values of net_weight and gross_weight in the parcelForm so that when a user adds a new instance of parcelForm and enters values for these form controls, it will update the total_net_weight and total_gross_weight in the orderForm. I have attempted to use functions like patchValue without success.
This code block is from new-order.page.ts:
import { Component, OnInit } from '@angular/core';
// other imports...
@Component({
selector: 'app-new-order',
templateUrl: './new-order.page.html',
styleUrls: ['./new-order.page.scss'],
})
export class NewOrderPage implements OnInit {
@Output() formChange = new EventEmitter();
pageTitle: string;
orders: Order[];
// rest of the declarations...
constructor(
private orderService: OrderService,
) { }
ngOnInit() {
// initialization code...
}
onSubmit() {
// form submission logic...
}
// other methods...
}
The HTML content from new-order.page.html:
<ion-header>
<ion-toolbar color="dark">
<ion-title>{{pageTitle}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-row>
<ion-col size-md="8" offset-md="2">
<form [formGroup]="orderForm">
<!-- form elements... -->
</form>
<br>
<br>
<ion-row>
<ion-col size="4" offset="10">
<ion-button color="success" (click)="addParcelButtonClick()">
<ion-icon name="add-outline"></ion-icon>Add Parcel
</ion-button>
</ion-col>
</ion-row>
<form [formGroup]="parcelForm">
<div formArrayName="parcels">
<div *ngFor="let parcel of parcels().controls; index as parcelIndex;">
<div [formGroupName]="parcelIndex">
Parcel {{parcelIndex + 1}}:
<ion-item>
<ion-label position="floating">Net Weight</ion-label>
<ion-input type="text" formControlName="net_weight"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Gross Weight</ion-label>
<ion-input type="text" formControlName="gross_weight"></ion-input>
</ion-item>
<br>
<ion-row>
<ion-col size="4" offset="10">
<ion-button color="danger" (click)="removeParcel(parcelIndex)">Remove <ion-icon name="trash-outline">
</ion-icon>
</ion-button>
</ion-col>
</ion-row>
</div>
</div>
</div>
</form>
</ion-col>
</ion-row>
</ion-content>