Binding Mat-Button-Toggle v binding Mat-Slide-Toggle

Question

How come this works fine. I.E isPrint shows as true or false on clicking the slide toggle

<div>
 <mat-slide-toggle [(ngModel)]="isPrint" #toggleSlide></mat-slide- 
 toggle>
isPrint: {{ isPrint }}
</div>

But this does not work and gives the error ERROR Error: No value accessor for form control with an unspecified name attribute

<div>
  <mat-button-toggle [(ngModel)]="isPrint" #toggleBtn>Toggle</mat-button-toggle>
  isPrint: {{ isPrint }}
</div>

What am I not doing correctly?

Possible duplicate of [How to bind to model with Angular Material ?](https://stackoverflow.com/questions/47083164/how-to-bind-to-model-with-angular-material-mat-button-toggle) — Sumit Parakh, Apr 27 '19 at 14:56

Sourav Dutta · Accepted Answer · 2019-04-27T15:01:30.487

1

Check WORKING STACKBLITZ

MatButtonToggle is supposed to be a part of mat-button-toggle-group.

But if you want to use it as a standalone component and bind model to it, you have to do something like below:~

<mat-button-toggle 
    [checked]="isPrint" 
    (change)="isPrint = $event.source.checked">
    Toggle
</mat-button-toggle>

edited Apr 27 '19 at 15:01

answered Apr 27 '19 at 14:52

Sourav Dutta

Ok thanks. I'm going to accept this but I need to research $event.source.checked as I haven't seen that before. – Bwizard Apr 27 '19 at 15:37

1 Answers1