mat-slide-toggle can be both disabled and checked

[edwin-hollen]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

mat-slide-toggle should not be both "checked" and "disabled" according to the Switch states in the spec:
https://material.io/design/components/selection-controls.html?image=https%3A%2F%2Fmaterial.io%2Fdesign%2Fassets%2F1MiD-2erXPyZKDpOOdaWTsqzkHGOt9Z7R%2Fselectioncontrols-switches-states.png#switches

What is the current behavior?

It's possible to apply both "disabled" and "checked" to a mat-slide-toggle:
https://material.angular.io/components/slide-toggle/examples

What are the steps to reproduce?

<mat-slide-toggle checked disabled>Slide toggle</mat-slide-toggle>
https://stackblitz.com/edit/mat-slide-toggle-spec-conflict

What is the use-case or motivation for changing an existing behavior?

Consistency with the Material spec

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

Angular Material v6.3.3

Is there anything else we should know?

Maybe disabled+checked is some kind of convenience feature? I still think the styling can be updated so it's in line with the current spec.

[jelbourn]

I consider this working as intended. In this case we're okay being more permissive than the spec; developers can decide if they want to be more restrictive at the application level.

[Lontkovsky]

0

i solved this problem with setTimeout; In your html file add to id like a #contract

<mat-slide-toggle color="primary" formControlName="contract" #contract>
Contract

in your .ts file use

@ViewChild('contract') contract: MatSlideToggle;
before constructor;

and iside of ngOnInit() add simple:

setTimeout(() => {
this.contract.toggle();
});
for me its work great!

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