Angular form control when disabled is updating incorrect value

I have a form modal with checboxes, input and select elements. On ticking checkbox, some input and select elements should be disabled. The dropdown has please select display value with stored value as null if disabled. However, even if values are cleared on UI and disabled, it is not patching it with empty and null values. It's taking previous values.

The form control does get the updated value when doing patchvalue. However, if the disable method is called on the control, the updated value gets lost and it gets the incorrect one.

Thanks for ur help

private disableControls() {
const isDiscountAPercentage = this.dynamicFormMenuForm.get('calcDiscountPercentage');
const discountPercentageInput = this.dynamicFormMenuForm.get('calcDiscountAmount');
const totalBillAmount = this.dynamicFormMenuForm.get('calcTotalBillAmount');
const specialOfferIncluded = this.dynamicFormMenuForm.get('specialOfferIncluded');
const extraCharge = this.dynamicFormMenuForm.get('extraCharge');

if (isDiscountAPercentage?.value == false) {
specialOfferIncluded?.enable();
discountPercentageInput?.disable();
totalBillAmount?.disable();

if (specialOfferIncluded?.value == false) {
extraCharge?.disable();
}
}
else {
specialOfferIncluded?.reset(false);
specialOfferIncluded?.disable();
extraCharge?.disable();
}

isDiscountAPercentage?
valueChanges.pipe(
distinctUntilChanged()
).subscribe(newValue => {
if (newValue === true) {
discountPercentageInput?.enable();
specialOfferIncluded?.
patchValue(false);
specialOfferIncluded?.disable();
extraCharge?.setValue('');
extraCharge?.disable();
totalBillAmount?.enable();
} else {
discountPercentageInput?.
setValue('');
discountPercentageInput?.
disable();
specialOfferIncluded?.
patchValue(false);
specialOfferIncluded?.enable();
extraCharge?.setValue('');
extraCharge?.disable();
totalBillAmount?.setValue('');
totalBillAmount?.disable();
}
});

// Subscribe specialOfferIncluded
changes

specialOfferIncluded?.
valueChanges.pipe(
distinctUntilChanged()
).subscribe(newValue => {
if (newValue === true) {
extraCharge?.enable();

isDiscountAPercentage?.
patchValue(false, { emitEvent:
false });
} else {

extraCharge?.setValue('', {
emitEvent: false });

extraCharge?.disable();

isDiscountAPercentage?.enable();
}
});
}

Continue reading...