Input of radio does not work well.

[ibufu]

<input type="radio" value="a" [(ngModel)]="radioValue">
<input type="radio" value="b" [(ngModel)]="radioValue">
{{radioValue | json}}

radioValue = 'a';

The value of radioValue will be 'a' or 'b' in angular1.
In angular2, tow radios will be unchecked at the initialization and the value of radioValue will be { "checked": true } , when I click one of them.

[zoechi]

dup of #3104? (maybe also #5133)

[ibufu]

@zoechi
I think it is different with #3104 and #5133. There is plunker.

[byavv]

+1, Seemed like a bug. It've never hapened in prev beta versions. Being in a form, radioinput's value represents as RadioButtonState ({ "checked": true } as @ibufu noted) If you need to solve it right now, try something like this:

<input type="radio"
         value="a" 
         #a
         ngControl="gender"
         (click)="radioValue = a.value" >   
...
<input type="radio"
         #b
         value="b" 
         ngControl="gender" 
         (click)="radioValue = b.value" >

Works for me.

[ibufu]

@byavv
The initial state of radioValue could get from server, so we may should bind it to radio. But ngModel does not work well.

[byavv]

@ibufu, it shouldn't be designed this way, but just for a smile)

 <label class="radio-inline">
                        <input type="radio"
                        value="male" 
                        #male
                        [checked]="child.gender === 'male'"
                        (click)="child.gender = male.value"
                        name="gender">Male</label>                   

                    <label class="radio-inline">
                        <input type="radio"
                        #female
                        value="female"
                        [checked]="child.gender === 'female'" 
                        (click)="child.gender = female.value" 
                        name="gender">Female</label> 

Will work in your case

[kara]

This looks like the same issue as #7642. Closing in favor of the other issue, so we can track it in one place :) Thanks for reporting!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}