MdCheckbox disabled by FormControl API cannot be enabled if clicked while disabled

[arlowhite]

Bug, feature request, or proposal:

Hookup a MdCheckbox to a FormControl.
disable(), try to click check, and enable() the form control.
Checkbox appears enabled but cannot be focused or checked/un-checked.

What is the expected behavior?

Checkbox should be able to be disabled/enabled using FormControl API and user interacting with disabled checkbox should not break it.

What is the current behavior?

1. checkbox works fine initially
2. disable()
3. Try clicking checkbox. First click causes ripple effect on check. More clicks do nothing
4. enable()
5. style changes to primary color, but cannot be clicked. Also, cannot be tab-focused

Sometimes I see:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

This seems to depend on whether you toggled the checkbox before disabling it.

What are the steps to reproduce?

https://github.com/arlowhite/material2/tree/checkbox-control-disable-bug
npm run demo-app
Go to Input
Scroll to Checkbox BUG

Which versions of Angular, Material, OS, browsers are affected?

angular2 master 9d719c5
Ran npm update in material2 project April 11th
Angular 4.0.1

Affects Chrome and Firefox; haven't tried others.

[arlowhite]

Also, in my own app with a ReactiveForm FormGroup, the checkbox is broken after disable()/enable() even without interacting with it. I call disable() in response to the entire form's valueChanges.

This would be more difficult to create a demo for. But after you push a fix to master I can test if the bug went away in my own app.

[mmacfadden]

We are also experiencing this same issue.

[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.}