question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

7reactions
ravivit9commented, Jul 19, 2017

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

3reactions
josephperrottcommented, Nov 14, 2016

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular ngModel not set radio button value inside ngFor
If I run the code, I am getting only last name score in list is checked with the score and rest of the...
Read more >
Radio · Angular Material 2 - kyleledbetter
A dynamic example for use inside a form showing support for [(ngModel)] : <md-radio-group [(ngModel)]="chosenOption"> <md-radio-button *ngFor="let o of ...
Read more >
Angular (forked) - StackBlitz
Radios with ngModel.
Read more >
Directives > mdRadioGroup - AngularJS Material
Whereas the native controls force the user to tab through all the radio buttons, <md-radio-group> is focusable and by default the <md-radio-button> s...
Read more >
[Solved]-ngFor with dynamic data from WebAPI-angular.js
Fixed the issue...Its not the issue with creating dynamic form group, its where I declared the formgroup... I had a child component in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found