Components: [button-toggle-group] bound to NgModel throws error if multiple selection is used

[RoxKilly]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When <button-toggle-group multiple [(ngModel)]="property"> is used, the model property should be updated with a list (object or array) of values selected in the toggle group.

Alternatively, improve the docs with a note that the ngModel binding is not supported in multiple selection mode.

What is the current behavior?

The app crashes with error: No value accessor for form control. The same code works when group is in exclusive selection mode

What are the steps to reproduce?

See this plunker. The app will not run unless you remove the multiple attribute from the toggle group in /app/app.component

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

It's a bug

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

Angular 2 rc.5, Material 2 alpha 7-2

[devversion]

This seems to be intentionally while looking at the source.

I think it would be probably good to support ngModel for multiple mode as well, and emit an array of the selected md-button-toggle's to the ngModel.

[jelbourn]

The behavior is intentional, but the error message and the docs should be better.

[devversion]

I personally think it would be good support NgModel on multiple button toggles as well.

Those should just handle an array of selected values instead of a single value.

When doing this, it would make sense to make the button-toggle, regardless of the multiple state, support an array as values and just output them differently when using it in single mode.

This would drop a lot of code and also would be super easy to maintain.

[jelbourn]

We do want to support a selection model eventually, but want it to be consistent between components (md-select, md-selection-list, and button-toggles)

[jelbourn]

@tinayuangao Until we support multiple selection on <toggle-button-group multiple> this should give a better error message

[eemeli]

It would be good if the button-group README also mentioned that with multiple selected the component does not implement ControlValueAccessor, and that it does not in fact have any of the properties and events listed under <md-button-toggle-group>. As is, the documentation is somewhat misleading.

[rdelriods01]

meanwhile, how we solve this problem?

[Rocker93]

@rdelriods01 It is possible to use multiple toggle group with changes reflected in the model as follows:
<md-button-toggle-group multiple>
<md-button-toggle *ngFor="let s of selectableItems" [value]="s" (change)="s.selected = !selectable.selected" [checked]="s.selected">{{s.name}}</md-button-toggle>
</md-button-toggle-group>.

[jelbourn]

Changing this to a feature now that the error message is better.

[mattheiler]

It might also be nice to have an implementation that supports flags... possibly via a flags directive?
```

Flag 0
Flag 1
Flag 2
Flag 4

[chriszrc]

A form control that you can't bind to some kind of state is pretty useless. I'm using reactive forms, so I had to implement my own custom component just to get and set values from a button-toggle because I wanted to support "multiple" :(

https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

[tinayuangao]

This should be fixed by #9191

[angular-automatic-lock-bot[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.

<sub>_This action has been performed automatically by a bot._</sub>