Tengo un <mat-slide-toggle>
que definí como tal:
<mat-slide-toggle [checked]="synchronizationState === 'ENABLED'" [disabled]="!canChangeSynchronizationState" formControlName="enableSynchronization" #enableSynchronizationToggle (change)="openConfirmSynchronizationStateDialog(enableSynchronizationToggle.checked)"> </mat-slide-toggle>
Sin embargo, cuando el usuario hace clic en el conmutador, cambia de estado sin importar qué (si se marcó, se desmarca y viceversa), incluso si synchronizationState
no ha cambiado.
<mat-slide-toggle [(ngModel)]="checked" [checked]="checked"></mat-slide-toggle>
más a fondo el componente de esta manera checked = false;
y parece que todavía puedo cambiar el estado de la palanca.
Parece que al mat-slide-toggle no le importa en absoluto lo que ingreso en [marcado], ¿qué estoy haciendo mal aquí?
no estoy seguro sobre el objetivo/caso de uso, pero es por diseño.
aunque se puede manipular, es muy recomendable repensar la UX del objetivo. tal vez un control o flujo de trabajo diferente
agregó un stackblitz que manipula el estado para que sea siempre verdadero en el control de alternancia:
https://stackblitz.com/edit/angular-elks1e?file=src/app/slide-toggle-overview-example.ts