Reputation: 24068
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
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
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
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