I have encountered an issue with a nested operation. The process involves removing an offer and then saving it again as a repeating one.
However, the problem arises when I try to use patchValue() on the item in offerList[index] after saving the repeating offer. An error occurs:
Error: Must supply a value for form control with name: 'id'.
Upon debugging, everything seems to be in order. The object saved in the final subscription contains valid fields. The id is present and not null:
this._offerService.remove(this.placeId, offer)
.pipe(
flatMap((removed: OfferModel) => {
removed.id = null;
removed.repeatWeekly = true;
return this._offerService.save(this.placeId, removed)
.pipe(finalize(() => this.updateOffersFormArray()));
}),
)
.subscribe(
(saved) => {
console.log(saved);
offerList[index].patchValue(saved);
});
The console will display:
{id: 55, offerDate: "2019-03-04", …}
In the function updateOffersFormArray(), this error occurs:
// this.offersFormArray is a FormArray
updateOffersFormArray() {
const tmp = this.repeatingOffers.concat(this.offers);
console.log(tmp);
this.offersFormArray.setValue(tmp); // <-- Throws error
}
The console output shows an array of FormGroup elements as expected. Each element's value includes an offer with all values set, including id, which contradicts the error message.
I'm struggling to identify the issue despite spending considerable time on it.
Although the code may seem unconventional, executing updateOffersFormArray() triggers a status change event in this.offersFormArray. This event updates this.offers and this.repeatingOffers for display purposes. Here is the related code:
this.offersFormArray.statusChanges.subscribe((e) => {
const offers: Array<AbstractControl> = [];
const repeatingOffers: Array<AbstractControl> = [];
for (const k of Object.keys(this.offersFormArray.controls)) {
const offerForm = this.offersFormArray.controls[k];
const offer = <OfferModel> offerForm.value;
if (offer.repeatWeekly) {
repeatingOffers.push(offerForm);
} else {
offers.push(offerForm);
}
}
this.offers = offers;
this.repeatingOffers = repeatingOffers;
});