Menu
How does one achieve radio button binding in beta 6?
I found a great plnkr for beta 0 (see http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview), but when I try to update it to beta 6 it breaks horribly (see http://plnkr.co/edit/voU933?p=preview).
I took a look at the commit that added built-in support for radio options (see https://github.com/angular/angular/commit/e725542), which gives this example
@Component({
template: `
<input type="radio" name="food" [(ngModel)]="foodChicken">
<input type="radio" name="food" [(ngModel)]="foodFish">
`
})
class FoodCmp {
foodChicken = new RadioButtonState(true, "chicken");
foodFish = new RadioButtonState(false, "fish");
}
but my attempts to make that work have so far ended up quite like my failed plnkr.
815
To make a basic form with radio buttons in it, wrap your radio button grouping(s) in a <form> tag, and include a <button> of type submit at the bottom. When the user clicks “Submit,” their responses are sent to the form handler. See below for a simple form example.
You group radio buttons by drawing them inside a container such as a Panel control, a GroupBox control, or a form. All radio buttons that are added directly to a form become one group. To add separate groups, you must place them inside panels or group boxes.
Radio buttons are created using <input> tag in HTML whith radio as the type attribute.
When focus moves to the group in which a radio button is selected, pressing Tab and Shift+Tab keys move focus to the radio button that is checked. Up Arrow and Down Arrow keys move focus and selection. Up Arrow key press moves focus and selection forward through the radio buttons in the group.
Update
Radio is working fine in RC.4 and the new forms module. See for example the Plunker in https://stackoverflow.com/a/38590919/217408
Original
Several issues.
Using <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script> caused an exception. I got rid of it by removing `min.?
The radio binds the value {checked: true} instead of value. This is obviously a bug and probably the same as these
I got it working with an ugly workaround. See https://plnkr.co/edit/988PSJKXCfrUXfLOGgyg?p=preview
<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'" name="sex" value="male">Male<br>
<input type="radio" [ngModel]="{checked: model.sex == 'female'}" (ngModelChange)="model.sex='female'" name="sex" value="female">Female
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
