Components: md-radio-group not working with *ngFor and ngModel

[amellnik]

Bug, feature request, or proposal:

md-radio-group does not correctly bind with ngModel if the ng-radio-buttons 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.

[RoxKilly]

@amellnik to write demos for which you control the Material and Angular version, feel free to fork from my setup and remove what you don't need. You can edit the versions near the top of systemjs.config.js.

Here is the plunk I started for you.

[josephperrott]

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

[amellnik]

Thanks @RoxKilly and @josephperrott -- Joseph's version is clearly working, but a slight modification to Rox's version doesn't work. Joseph, what version of Material is yours pointing to? I can't tell from the system.config.js.

[josephperrott]

I just forked from the plnkr you linked to so I am unsure.

[jelbourn]

@tinayuangao can you reproduce?

[tinayuangao]

Can't reproduce this issue

[jelbourn]

Closing as not reproducible.

[ravivit9]

I have the same issue with latest version of MD and angular 4.x, any input would be much helpful.

[monica7l]

using _

[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.

_{_This action has been performed automatically by a bot._}