md-radio-group not working with *ngFor and ngModel
See original GitHub issueBug, feature request, or proposal:
md-radio-group
does not correctly bind with ngModel
if the ng-radio-button
s are generated dynamically with *ngFor
. This is one of the use cases given in the documentation for the component.
What is the expected behavior?
ngModel
should reflect the selected value.
What is the current behavior?
Upon loading, all values are selected. After clicking on one item, nothing happens. Clicking on a second item selects only that item, and further clicks move the selection around. The variable bound with ngModel
is always null.
Note that if the ng-radio-buttons
are not generated with ngFor
, everything works as expected.
What are the steps to reproduce?
ngModel
with md-radio-group
doesn’t work on the dev plunker at the moment (I’m not sure if it’s pointed at an older version of material or what, but it’s giving a Can't bind to 'ngModel' since it isn't a known property of 'md-radio-group'
error).
However, a simple example on 2.0.0-alpha.10 is:
<md-radio-group [(ngModel)]="active_fish">
<md-radio-button *ngFor="let f of fish" [value]="f.name">{{f.name}}</md-radio-button>
</md-radio-group>
which does not work as described above. However, something like
<md-radio-group [(ngModel)]="active_fish">
<md-radio-button value="Bob">Bob</md-radio-button>
<md-radio-button value="Amir">Amir</md-radio-button>
<md-radio-button value="Suzy">Suzy</md-radio-button>
</md-radio-group>
works as expected.
(If more detail is needed to reproduce, I can generate a small project).
What is the use-case or motivation for changing an existing behavior?
Which versions of Angular, Material, OS, browsers are affected?
Angular 2.1.1, Material 2.0.0-alpha10 and Chrome 54
Is there anything else we should know?
I could probably provided a plunker demo if anyone can figure out the error with it mentioned above.
Issue Analytics
- State:
- Created 7 years ago
- Comments:10 (5 by maintainers)
Top GitHub Comments
I have the same issue with latest version of MD and angular 4.x, any input would be much helpful.
To use ngModel you will need to include the FormsModule from angular/forms.
import {FormsModule} from '@angular/forms';
You can see a working fork from your plunkr here