CODEWITHSUNDEEP
angularangular-material
Nate Gardner
Nate Gardner

Reputation: 1717

Angular Material dynamic button toggle group form control accessor

Following the example in the official demo app I wrote this code:

<md-button-toggle-group name="typeToggle" [(ngModel)]="chosenType" multiple>
  <md-button-toggle *ngFor="let type of subTypes" [value]="type">
    {{type}}
  </md-button-toggle>
</md-button-toggle-group>

But I get the error 

core.es5.js:1084 
ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'typeToggle'
Error: No value accessor for form control with name: 'typeToggle'

Am I missing something?

Response to comments:

Removing the name attribute results in:

core.es5.js:1084 
ERROR Error: Uncaught (in promise): Error: No value accessor for form control with unspecified name attribute
Error: No value accessor for form control with unspecified name attribute

Removing multiple eliminates the bug but makes it so that the user is only allowed to select one. Select multiple is supported with this syntax according to the Material 2 documentation. Is there another undocumented way to select multiple? I need to be able to select more than one button at a time- I've seen lots of working demos of this behavior.

Upvotes: 1

Views: 5653

Answers (1)

Nate Gardner
Nate Gardner

Reputation: 1717

I don't know why it's broken, but here's a fix.

<md-button-toggle-group name="typeToggle" [(ngModel)]="chosenType" multiple ngDefaultControl>
  <md-button-toggle *ngFor="let type of subTypes" [value]="type">
    {{type}}
  </md-button-toggle>
</md-button-toggle-group>

to provide some insight, evidently the docs now indicate that ngModel is not supported on multiple, and values can be accessed using (click). However, by adding ngDefaultControl, the value is accessible. This is as bit of a hack, but so far it works.

Upvotes: 5

Related Questions