Having state in md-checkbox causes 'Changed after checked' errors when writing a value

[matthewdenobrega]

Note: for support questions, please use one of these channels:
https://github.com/angular/material2/blob/master/CONTRIBUTING.md#question.
This repository's issues are reserved for feature requests and bug reports.

• Do you want to request a feature or report a bug?
  Report a bug
• What is the current behavior?
  When the underlying data represented by an md-checkbox changes, Angular complains that the 'checked' attribute of the checkbox has changed after it was checked
• If the current behavior is a bug,
  please provide steps to reproduce and if possible a minimal demo of the problem
  via https://plnkr.co or similar.
  I can't find a good base plunkr to work off - Create a Plunker template using angular2-material #309

if you have:
<md-checkbox [(ngModel)]="selected">

And, in the component:
setInterval(() => {this.selected = !this.selected}, 1000)

Angular will throw an error.

• What is the expected behavior?
  The checkbox should update without an error
• What is the motivation / use case for changing the behavior?
  So that md-checkboxes stay in sync with their underlying data
• Which version of Angular and Material, and which browser and OS does this issue affect?
  Did this work in previous versions of Angular / Material?
  Please also test with the latest stable and snapshot versions.
  Tested on 2.0.0.alpha-2 in Chrome
• Other information
  (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)
  I spent some time on this with the original sketch angular-material checkboxes, and I don't think it's possible to have internal state that is updated by writeValue in a ControlValueAccessor, as writeValue is called when changes are propagated to the view. I worked around it by only using the DOM (specifically the aria-checked attribute) to store the checkbox state, and getting rid of the checked variable. This is closer to what the ControlValueAccessor for standard inputs does, and fixes the issue.

[matthewdenobrega]

I can try sketching a PR, but it's quite a big change from what's there now - the disabled, checked and indeterminate states would be written to / read from the DOM directly. I have a working version based on the first-draft component in the angular repo, but it doesn't handle the indeterminate state and has significantly fewer dynamic attributes.

[jelbourn]

@matthewdenobrega I'm going to take a look at this next week; reading state from the DOM is somewhat undesirable.

[robertmesserle]

@matthewdenobrega This seems to be working properly in master. Closing for now - please let us know if this is still an issue.

[matthewdenobrega]

@robertmesserle I noticed after I upgraded to alpha.4 that this was working - thanks.

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