Updating value in disabled Angular Form Control

Question

I'm using a form input to exhibit some data the user can modify. But it starts disabled and enables when the user gets to it. However, if I just set it's value while it's disabled it doesn't update the view.

The workaround I found for it is the following:

const timeBeginControl = group.get('timeBegin');
timeBeginControl.enable();
timeBeginControl.setValue(value);
timeBeginControl.disable();

Do I really have to enable and disable it everytime I intend on modifying it's value before it's enabled?

Answer 1

I'm leaving the original answer here as history, but I didn't know better when I wrote this and the answer to myself. I was just hammering angular's detection change with the updateValueAndValidity and all of that, but check the update if you're stuck with disabled form issues

Original Answer

I've found out. It seems that when you're updating a disabled field you need to run FormControl.updateValueAndValidity()

So, in my case, i'm doing

timeBeginControl.setValue(value);
timeBeginControl.updateValueAndValidity();

Update 2023: This was most likely caused by problems with the way I was handling the data flow and therefore the angular detection change mechanisms. However, if you got here because you're trying to read a value from a form and it's disabled fields don't show up, I came to your rescue:

Angular by default doesn't send disabled fields values when you call form.value(), what you actually need is form.rawValue()

If you got into problems with the view not updating when you call a form.patchValue() it's probably because you've made your form go to the parent component or some sort of cheat on the way angular intends you to pass around this form so it can actually know that the form changed.