question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[forms] disabled FormGroups include disabled controls in `.value`

See original GitHub issue

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

forms

Is this a regression?

No

Description

It was working fine in Angular 11, Now it showing up disabled control in form.value

https://github.com/angular/angular/issues/36894 As per this disabled control get excluded from form.value if you want disabled control value then you should use getRawValue()

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ws73gc-1fgccc?file=src%2Fapp%2Fparent%2Fchildren%2Fchildren.component.ts

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular: 12.2.7

Anything else?

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
dylhunncommented, Jan 28, 2022

As I described above, .value excludes disabled controls unless the entire group is disabled. I think we probably are not going to change this. It’s really weird, but at least it’s consistent, and I can understand the motivation – it would be even more confusing if .value returned the empty object! Plus, changing it would break the universe.

I think the “fix” for this is to use .getRawValue() instead of .value. This is a radical idea, but maybe we should deprecate .value. The exclusion of disabled controls isn’t terribly useful anyway. Closing for now though, since that’s a bigger question.

1reaction
dylhunncommented, Oct 25, 2021

This is happening because when the entire FormGroup is disabled, calling .value does include disabled children.

Consider the following:

myForm = new FormGroup({
  a: new FormControl({ value: 'e', disabled: false }),
  b: new FormControl({ value: 'd', disabled: true }),
});
console.log(this.myForm.value);

This will log only the value of a. However, setting a to disabled: true will cause the entire containing FormGroup to become disabled:

myForm = new FormGroup({
  a: new FormControl({ value: 'e', disabled: true }),
  b: new FormControl({ value: 'd', disabled: true }),
});
console.log(this.myForm.value);

and now this prints both a and b.

This is quite counter-intuitive, and perhaps we should change it, but I don’t think it’s a regression.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 2 disabled controls do not get included in the form.value
There's a two way we can get disabled form values. First onSubmit(){ for (const prop in this.formControl.controls) { this.
Read more >
Exploring the difference between disabling a form control ...
I'm using formGroup and formControlName directives from Reactive Forms API ... We've given the form controls default values, disabled both the controls and ......
Read more >
Disabled form form.value shows all controls, as opposed to ...
Disable one control => form.value shows only the other enabled . ... formGroup of control is disabled then you will have to check...
Read more >
Angular — Disable a Form while Preserving Form Control State
Let's say we have a use case where the postal code is disabled by default as long as a country is not selected...
Read more >
FormControl - Angular
Instantiate a FormControl , with an initial value. ... The following example initializes the control with a form state object. The value and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found