Angular: "checked" attribute of radio input not working as expected

Question

In the code shown below,

I am iterating over deliveryMethods which are displayed in the view as radio buttons. I intend to have the first radio button pre-selected.

I applied the following attribute:

[checked]="ndx==0"

where ndx is the index of each iteration. But none of the radio button is checked.

How do I dynamically pre-select the first radio button?

<div *ngFor="let dm of deliveryMethods; let ndx=index">
   <label class="form-check-label">
      <input class="form-check-input f-s-1pt2" type="radio" 
             name="dm.name" 
             value="{{dm.name}}" 
             [(ngModel)]="item.item.deliveryMethod"
             (change)="filterProducts(item)"
             [checked]="ndx==0"
             class="radio-dimension"> 
             {{dm.label}}
   </label>
</div>

why are you using ngModel, value, and checked bindings, all at the same time? — Jota.Toledo
– Jota.Toledo, Commented Jan 23, 2018 at 18:03
can you post a plunker for this? however you are not binding any value to the control . use [value] = "dm.name" to use property binding and then set item.item.deliveryMethod as the same value in typescript to have the radio button pre selected. — Niladri
– Niladri, Commented Jan 23, 2018 at 18:14

Niladri · Accepted Answer · 2018-01-23 18:32:29Z

6

I have removed the [(ngModel)] and use property binding with [value] to bind the value to the radio button control . The below code works for me

<div *ngFor="let dm of deliveryMethods; let ndx = index">
              <label class="form-check-label">
                    <input class="form-check-input f-s-1pt2" type="radio" 
                      name="dm.name" 
                      [value]="dm.name"
                      (change)="filterProducts(item)"
                      [checked]="ndx === 0"
                      class="radio-dimension"> 
                      {{dm.label}}
             </label> 
       </div>

Here is a working plunker https://plnkr.co/edit/6Ay2zr7Ow3csB5Pxdgdz?p=preview

answered Jan 23, 2018 at 18:32

Niladri

5,9822 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

koque Over a year ago

Brilliant. Thank you.

Nikhil Nanjappa Over a year ago

@Niladri - What if I want to get the value of the checked radio button on template driven form submit ?

Ruslan Jackson Over a year ago

This solution is useless, if you need to get value from this form! If you use #accessor to get the value from this form, there is too hard to controll it if you have multiple form! So, you must use formControlName or [(ngModel)] to keep track the value!

Niladri Over a year ago

@RuslanJackson It is useless when you have multiple forms, OP is not using multiple form so this is not useless in this context.

Ruslan Jackson Over a year ago

@Niladri I say is useless, not incorrect or not working! My opinion, is to use Angular guidelines, to keep track of the value, using reactive Forms or Template Driven Forms, not with #accessors! Otherwise go to use jQuery :)

|

shehan96 · Accepted Answer · 2021-11-30 08:32:56Z

1

If you want to keep [(ngModel)] without removing it just use following syntax in angular

<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"
                                #is_public="ngModel" name="is_public" [(ngModel)]="updateGroupData.is_public" [value]="1">

Keep in mind to use [value] for data binding.

OR

Use this with true and false

<input class="form-check-input" type="radio" id="flexRadioDefault2" #is_public="ngModel" name="is_public [(ngModel)]="groupFormData.is_public" [value]="false">

Keep in mind to use [value]="true" or [value]="false" for data binding.

edited Nov 30, 2021 at 8:32

answered Nov 12, 2021 at 10:17

shehan96

3881 gold badge4 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular: "checked" attribute of radio input not working as expected

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related