Angular 2.1, radio button not updating on load

Question

For angular 2.1 - the radio button is not set even though the property in my interview variable is set and not null.

I have tried to look at the following posts and tried almost every solution but without any luck.

First setup

This one works when changing between the radio buttons, but it doesn't set the selected radio button upon load.

<input type="radio" [(ngModel)]="interview.interviewChannelType" name="interviewChannelTypePersonal" value="0" [checked]="interview.interviewChannelType === 0"
                                id="interviewChannelTypePersonal" required />
<label for="interviewChannelTypePersonal">Personlig møde</label>
<input type="radio" [(ngModel)]="interview.interviewChannelType" name="interviewChannelTypePhone" value="1" [checked]="interview.interviewChannelType === 1"
                                id="interviewChannelTypePhone" required />
<label for="interviewChannelTypePhone">Telefon</label>
<input type="radio" [(ngModel)]="interview.interviewChannelType" name="interviewChannelTypeVideo" value="2" [checked]="interview.interviewChannelType === 2"
                                id="interviewChannelTypeVideo" required />
<label for="interviewChannelTypeVideo">Video</label>

Second try

This checks the selected radio button upon load but it wont let me navigate between the radio buttons.

<input type="radio" (change)="interview.interviewChannelType = $event.target.value" [checked]="interview.interviewChannelType === 0" value="0" />
<label for="interviewChannelTypePersonal">Personlig møde</label>
<input type="radio" (change)="interview.interviewChannelType = $event.target.value" [checked]="interview.interviewChannelType === 1" value="1" />
<label for="interviewChannelTypePhone">Telefon</label>
<input type="radio" (change)="interview.interviewChannelType = $event.target.value" [checked]="interview.interviewChannelType === 2" value="2" />
<label for="interviewChannelTypeVideo">Video</label>

interveiwChannelType is an enum:

export enum InterviewChannelType {
Personal = 0,
Phone = 1,
Video = 2
}

I hope some of you out there can give me a boost in the right direction! Thanks in advance.

SOLUTION FOUND

Thanks to HirenParekh's comment, he made me aware of using the value as a angular property instead of the normal attribue. Changing it from value="0" to [value]="0" did the trick.

score 1 · Accepted Answer · answered Dec 16 '16 at 16:48

You have to bind the value property of radio button. Inside your first setup bind the value property as follows.

<input type="radio" [(ngModel)]="interview.interviewChannelType" 
                    name="interviewChannelTypePersonal" 
                    [value]="InterviewChannelType.Personal" 
                    [checked]="interview.interviewChannelType === 0"
                    id="interviewChannelTypePersonal" required 
/>
<label for="interviewChannelTypePersonal">Personlig møde</label>
<input type="radio" [(ngModel)]="interview.interviewChannelType" 
                    name="interviewChannelTypePhone" 
                    [value]="InterviewChannelType.Phone"  
                    [checked]="interview.interviewChannelType === 1"
                    id="interviewChannelTypePhone" required 
/>
<label for="interviewChannelTypePhone">Telefon</label>
<input type="radio" [(ngModel)]="interview.interviewChannelType" 
                    name="interviewChannelTypeVideo" 
                    [value]="InterviewChannelType.Video"  
                    [checked]="interview.interviewChannelType === 2"
                    id="interviewChannelTypeVideo" required 
/>
<label for="interviewChannelTypeVideo">Video</label>

Angular cannot read an enum directly in html. I am receiving a "cannot read Personal of undefined". Changing the value property to [value]="0" works. Thank you for making me aware of changing the value attribute to a property. — Casper Nybroe, Dec 19 '16 at 07:37

Angular 2.1, radio button not updating on load

1 Answers1