I am struggling to update values in an array form, as I am facing challenges setting new values.
Although I attempted to set values using patch value, my attempts were unsuccessful.
// Component.ts
this.packageForm = this.formBuilder.group({
title: ['', Validators.required],
productImage: ['', Validators.required],
price: ['', Validators.required],
products: this.formBuilder.array([
this.addProductFormGroup()
])
})
// Form Builder Array
addProductFormGroup(): FormGroup {
return this.formBuilder.group({
productNames: ['',Validators.required],
productQuantities: ['',Validators.required]
})
}
// Add Row
addProductsRow()
{
(<FormArray>this.packageForm.get('products'))
.push(this.addProductFormGroup();
}
// Remove Row
removeProductsRow(productGroupIndex: number) {
(<FormArray>this.packageForm.get('products'))
.removeAt(productGroupIndex);
}
addPackage() {
this.productNames=null;
this.productQuantities=null;
this.packageForm.value.products.forEach(element => {
this.productNames = (this.productNames == null) ? element.productNames
: this.productNames + "~" + element.productNames;
this.productQuantities = (this.productQuantities == null) ?
element.productQuantities : this.productQuantities + "~" +
element.productQuantities;
});
}
When triggering the click event addPackage(), I retrieve values from the form. My goal is to format and send the form data with productNames as [oil~sugar~flour] and productQuantity as [4~3~5].