Angular2 - Radio Button Binding

Question

I want to use radio button in a form using Angular 2

Options : <br/>

1 : <input name="options" ng-control="options" type="radio" value="1"  [(ng-model)]="model.options" ><br/>

2 : <input name="options" ng-control="options" type="radio" value="2" [(ng-model)]="model.options" ><br/>

model.options initial value is 1

when the page is loaded the first radio button isn't checked and the modifications aren't binded to the model

Any Idea ?

Answer 1

I was looking for the right method to handle those radio buttons here is an example for a solution I found here:

<tr *ngFor="let entry of entries">
    <td>{{ entry.description }}</td>
    <td>
        <input type="radio" name="radiogroup" 
            [value]="entry.id" 
            (change)="onSelectionChange(entry)">
    </td>
</tr>

Notice the onSelectionChange that passes the current element to the method.

Answer 2

Radio input doesn't seem to be supported yet. There should be a radio input value accessor (similar to checkbox's one, where it sets 'checked' attr here) but I didn't find any. So I implemented one; you can check it out here.

Answer 3

This may be not the correct solution but this one is also option hope it will help someone.

Till now i had getting the value of radioButtons using (click) method like following:

<input type="radio" name="options" #male (click)="onChange(male.value)">Male
<input type="radio" name="options" #female (click)="onChange(female.value)">Female

and in the .ts file i have set the value of predefined variable to getter value of onChange function.

But after searching i found good method i have't tried yet but it seems this one is good using [(ng-model)] link is here to github here. this is using RadioControlValueAccessor for the radio as well as checkbox too. here is the working #plnkr# for this method here .

Answer 4

My manual workaround, which involves manually updating model.options when a new radio button is selected:

template: `
  <label *ngFor="let item of radioItems">
    <input type="radio" name="options" (click)="model.options = item" 
     [checked]="item === model.options">
    {{item}}
  </label>`

class App {
  radioItems = 'one two three'.split(' ');
  model      = { options: 'two' };
}

This Plunker demonstrates the above, as well as how to use a button to change the selected radio button -- i.e., to prove that the data binding is two-way:

<button (click)="model.options = 'one'">set one</button>

Answer 5

[value]="item" using *ngFor also works with Reactive Forms in Angular 2 and 4

<label *ngFor="let item of items">
    <input type="radio" formControlName="options" [value]="item">
    {{item}}
</label>`

Answer 6

use [value]="1" instead of value="1"

<input name="options" ng-control="options" type="radio" [value]="1"  [(ngModel)]="model.options" ><br/>

<input name="options" ng-control="options" type="radio" [value]="2" [(ngModel)]="model.options" ><br/>

Edit:

As suggested by thllbrg "For angular 2.1+ use [(ngModel)] instead of [(ng-model)] "