ReactiveForms checkbox 'disabled' and 'checked' are not predictable when using FormBuilder.group()

[dudewad]

🐞 bug report

Affected Package

@angular/forms

Is this a regression?

Not sure, haven't tried to do this before

Description

When using FormBuilder to create a FormGroup, I have noticed that inputs of type checkbox cannot be set to both disabled and checked. disabled will work on its own, but when checked is added as well, I see the box gets checked but not disabled.

I understand that checkbox checked states are linked to their value property (somehow or other) but this is unintuitive and I can't find anything for the life of me about how it is supposed to work or be configured. I noticed that adding a falsey value for a checkbox control config also causes a disabled state.

Conversely, I also noted that when a checkbox is configured w/o a value and then set to disabled, it actually stays enabled and checks the checkbox. Not sure what's up but maybe these properties are in conflict somehow?

If there is documentation around this, it's really really hard to find. If this is a bug (which it looks to be, I've been messing with this for quite some time now), then hopefully this issue brings it to light.

Manual configuration after the form group creation works (i.e. manually calling disable()) but this is not desirable.

A CLARIFICATION
This is not a blocking bug. Checkbox inputs can still be configured using value and disabled. However I find this counter-intuitive. Configuring native inputs with type="checkbox" involves giving them a value and the input itself having a checked/unchecked state, which are two different things. I think Angular conflates the two, for what I can imagine was considered "ease of use", but given that this is not how you configure native checkbox elements, it is frustrating, confusing, and worse, takes a long time to debug.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-3sy5kw

🔥 Exception or Error

N/A

🌍 Your Environment

Angular Version:

Angular CLI: 7.3.9
Node: 10.15.0
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      7.3.7
@angular/cli                      7.3.9
@angular/flex-layout              7.0.0-beta.19
@angular/material                 7.3.7
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.5.2
typescript                        3.2.4
webpack                           4.29.0

Anything else relevant?

FYI the version in stackblitz also reproduces the issue.

[Airblader]

Related and possibly a duplicate of #30619

[lebesnec]

It seem that if you use the "object" syntax it doesn't work. Just passing a boolean work, but you can't use the "disabled" attribute :

 this.formGroup = this.formBuilder.group({ 
      check1: [ true ], // work
      check2: [{ checked: true }],  // doesn't work
      check3: [{ value: true }]  // doesn't work
});