Skip to content

MatSlideToggle: ngModel & [disabled] gives error #12323

@vapits

Description

@vapits

Bug, feature request, or proposal:

Bug

What is the expected behavior?

ngModel should work with combination with disabled input.

What is the current behavior?

When I use a combination of those two and change the value of the disabled input on the update the I get an error in console (even that the component works correctly).

What are the steps to reproduce?

My DOM:

<mat-slide-toggle
   [(ngModel)]="item.enabled"
   (change)="updatePreference(item)"
   [disabled]="disableSwitches">
</mat-slide-toggle>

My component (the change event):

updatePreference(item: CommunicationPreferences) {
    this.disableSwitches = true;
    this.communicationPreferencesService.updatePreference(item)
    .finally(() => this.disableSwitches = false)
    .subscribe(data => {
      this.communicationPreferences.find(element => element.subscriptionId === item.subscriptionId).subscriptionId = data.subscriptionId;
    });
  }

The event works but the slide-toggle fails to come back from the disabled state and I get this error in the console:

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

Also here's a working link that can replicate the error: https://stackblitz.com/edit/angular-bn4cr8

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

Angular CLI: 6.0.7
Node: 9.8.0
OS: darwin x64
Angular: 6.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser, router
... service-worker

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.6.7
@angular-devkit/build-angular       0.6.3
@angular-devkit/build-optimizer     0.6.3
@angular-devkit/core                0.0.22
@angular-devkit/schematics          0.0.39
@angular/cdk                        6.4.0
@angular/cli                        6.0.7
@angular/flex-layout                6.0.0-beta.15
@angular/material                   6.4.0
@angular/platform-browser-dynamic   6.0.0
@angular/pwa                        0.6.8
@ngtools/json-schema                1.1.0
@ngtools/webpack                    6.0.3
@schematics/angular                 0.6.0
@schematics/update                  0.6.7
rxjs                                6.2.1
typescript                          2.7.2
webpack                             4.10.2

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions