Lahiru Chandima
Lahiru Chandima

Reputation: 24068

Angular2 boolean md-radio-button not working

I need two radio buttons to check between two options. I used following.

<md-radio-button [value]=true [(ngModel)]="carSelected" name="carOption">Car</md-radio-button>
<md-radio-button [value]=false [(ngModel)]="carSelected" name="busOption">Bus</md-radio-button>

In my component, I have carSelected boolean variable

public carSelected: boolean = true;

But, the radio buttons won't get updated with the value of carSelected. Also, when radio buttons are checked, carSelected doesn't get updated either.

What could be going wrong here?

Upvotes: 1

Views: 5282

Answers (3)

isuruAb
isuruAb

Reputation: 2240

Try this. This works for me. There is a method that we can trigger in changes.you can pass the value you need using that.

  <md-radio-group class="example-radio-group" [(ngModel)]="carSelected">
    <md-radio-button [value]=true (change)="getval('car')">Car</md-radio-button>
    <md-radio-button [value]=false (change)="getval('Bus')">Bus</md-radio-button>
  </md-radio-group>

My TS File

getval(car){
  this.carSelected=true;
  console.log(car)
}

read the API reference here. you can do lot more with angular material 2.

If you need more features that material haven't .use this UI platform.

Upvotes: 0

Ajay Kumar
Ajay Kumar

Reputation: 1164

Try this In Html:

<md-radio-group [(ngModel)]="carSelected">
  <md-radio-button [value]=true name="carOption">Car</md-radio-button>
  <md-radio-button [value]=false name="busOption">Bus</md-radio-button>
</md-radio-group>

In component: public carSelected: boolean = true;

Upvotes: 5

HirenParekh
HirenParekh

Reputation: 3735

first of all radio buttons required same names to work as radio buttons. everything else is fine in your code.

you should bind ngModel to the <md-radio-group> tag not to <md-radio-button> tag.

and here is the link that shows how to handle different form controls in angular 2

i hope this will help.

Upvotes: 1

Related Questions