-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Closed
Labels
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Description
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 urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgent