Disabled form form.value shows all controls, as opposed to partially disabled form which shows only enabled controls.

Bug Report

Affected Package

@angular/forms - Angular 12

Minimal Reproduction

1. Create a reactive form group with 2+ controls.
2. Add <pre>{{form.value | json}}</pre> to the html.
3. Disable one control => form.value shows only the other enabled control. (Correct behavior. It hides the disabled controls.)
4. Disable all controls (e.g., using form.disable()) => form.value shows both controls, instead of being empty. (Incorrect behavior.)

[destus90]

This is described in the docs

https://angular.io/api/forms/AbstractControl#value

For a disabled FormGroup, the values of all controls as an object with a key-value pair for each member of the group.

[petebacondarwin]

This is working as expected. When a form is disabled its value still includes all its children’s values in its value property. When all a form’s children are disabled, then the form is implicitly disabled itself. So again will include all the values of the disabled children.

You can check theform.disabled property before reading the form.value property if you want a different value for the form when it is disabled.

See https://stackblitz.com/edit/angular-zrstua-lcsktg?file=src%2Fapp%2Finput-errors-example.ts