Why updateValueAndValidity is not updating the value of form Controls in Angular 12

[Asif905]

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

Yes

Description

I have recently migrated from Angular 9 to Angular 12 and observing one issue related to form control while using ReactiveFormsModule.

The layout is like the page has a dropdown selection and multiple input boxes. And the behavior is if I change the value from dropdown it populates the values of the input box based on the model.

On selecting dropdown value, we are subscribing to value Changes and setting input box values using patchValue() method. I am also using updateValueAndValidity() to update the respective values. Below is the code for reference

toggleControls(show: boolean, formMeta: object, data?: { [key: string]: string }) {
        Object.keys(formMeta).forEach((formName) => {
            if (!show) {
                this.form.removeControl(formName);
                return;
            }
            this.form.addControl(formName, formMeta[formName]);
            this.form.get(formName).patchValue(data[formName]);
        });
        this.form.updateValueAndValidity();
    }

Issue:
using patchValue and updateValueAndValidity() is not updating the value of the form controls, and new set value is not getting reflected in the UI as well.

Note: If I manually trigger changeDetection after updateValueAndValidity(), the behavior works as expected.

Question: This behavior was working fine in Angular 9 and observing this issue after migrating to 12. Is there any change recently related to form value update and any alternative solution without using changeDetection..?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

No response

Anything else?

No response

[jessicajaniuk]

@Asif905 Do you know if you were using Ivy with version 9 and have you switched over to Ivy with version 12? Could you also create a minimal stackblitz reproduction of this for us to debug further? Thank you!

[Asif905]

@jessicajaniuk I am using Ivy with both version 9 or 12. Stackblitz code link: https://stackblitz.com/edit/angular-ivy-bqpprh?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,tsconfig.json. When I first select "Bangalore" from dropdown, it assigns correct value to Street and State form control. But, after that If I update the dropdown value to "Kolkata", it doesn't update the value.

[atscott]

Thanks for the reproduction. This is happening because you're removing the control and then adding it back immediately. The act of removing it causes the cleanup to happen. Adding it back before change detection is able to clear it out means that it won't be detected as a new control either so it's now in a limbo state.

Your comment "// Adding changeDetectorRef.detectChanges() here updates the values correctly" actually only works when detectChanges is called when show === false. As I mentioned above, you've told the forms that you're removing the control so it obliges and prepares it for cleanup. But then the control is added back before it can be removed from the DOM (via the ngIf in your template). When you do force the DOM to update with if(!show) this.cdr.detectChanges() in that helper function, the result is that the formControlName gets removed and then when you add it back, it gets set up correctly again.

I'm not actually sure why you have this at all:

// first reset the controls
this.toggleControls(false, this.thirdPartyControls, this.selectedData);

Removing that line makes everything work because you no longer have the problem of removing and adding the control back before it can be fully cleaned up: https://stackblitz.com/edit/angular-ivy-3kpnbd?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts

I'm going to close this as a "won't fix".

[Asif905]

@atscott The reason I have added remove control as I had a behavior to show different fields based on the dropdown selection.

Also, my question is why this same code used to work in Angular 9 and not in Angular 12...? Is there any changes done for this

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}