Radio button misbeahaving in angular 4 (inside of ngFor)

Question

<li *ngFor="let x of addressdata;let i = index"> <div class="col-md-2"> <input type="radio" [value]="x.PreferedAddress" [(ngModel)]="x.PreferedAddress" (ngModelChange)="RadioCheck(i)" name="radiogroup" id="Prefered"/> </div> </li>

from db i get 3 rows and binding correctly, for particular row only have PreferedAddress=1 remaining has value 0. but in list by default last row radio button is checked

what you exactly want? can you please share your angular code? — bhaumik shah
– bhaumik shah, Commented May 15, 2018 at 6:29
Radio button workes well with the name. name must be the same for one group of radio buttons. — Arpit Yadav
– Arpit Yadav, Commented Jan 10, 2021 at 12:30

Sanoj_V · Accepted Answer · 2018-05-15 06:51:35Z

1

There many ways to bind radio button using *ngFor:

<li *ngFor="let x of addressdata;let i = index"> <div class="col-md-2"> <input type="radio" [checked]="x.PreferedAddress==1" (ngModelChange)="RadioCheck(i)" name="radiogroup" /> </div> </li>

This is way to do it based on your requirement

Note: If you are using [(ngModel)] then you don't need id and value attribute.

edited May 15, 2018 at 6:51

answered May 15, 2018 at 6:37

Sanoj_V

2,9961 gold badge14 silver badges33 bronze badges

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

5 Comments

madhu Goud Over a year ago

Thanks Sanoj , Its working fine . may i know what is the issue if i fill [(ngModel)]

Sanoj_V Over a year ago

You can check the documentation here (angular.io/api/forms/NgModel)

madhu Goud Over a year ago

model value not getting if i remove [(ngModel)] this. if i select another radio button .. how can i get that change

Sanoj_V Over a year ago

You can change it from this RadioCheck(i) function find index and update value to 1 if you select current radio button and rest of update value set to 0.

Sanoj_V Over a year ago

Remove (ngModelChange)="RadioCheck(i)" instead `(change)="RadioCheck(i)" like this.

mittal bhatt · Accepted Answer · 2018-05-15 07:29:28Z

you use name property dynamic and check in your array variable assign for radio button must have type Boolean.improve code below..

in html use name="radiogroup-{{i}}"

user4676340 · Accepted Answer · 2018-05-15 06:29:34Z

You use primitive values (strings), so you need to use a custom trackby function.

customTB(index, item) { return `${index}-${item.PreferedAddress}`; }

In your HTML

<li *ngFor="let x of addressdata;let i = index; trackBy: customTB"> <div class="col-md-2"> <input type="radio" [value]="x.PreferedAddress" [(ngModel)]="x.PreferedAddress" (ngModelChange)="RadioCheck(i)" name="radiogroup" id="Prefered"/> </div> </li>

itzhar · Accepted Answer · 2018-10-02 16:25:23Z

checked needs to get string, anyway, this is my solution:

getChekedState(x: any): string { if (x.PreferedAddress==1) { return 'checked'; } else { return ''; } }

then in your html:

[checked]="getChekedState(x);"

bhaumik shah · Accepted Answer · 2018-05-15 06:27:57Z

the problem is that you didn't set your id and code value here is your improve code

 <li *ngFor="let x of addressdata;let i = index"> <div class="col-md-2"> <input type="radio [value]="x.PreferedAddress [(ngModel)]="x.PreferedAddress" (ngModelChange)="RadioCheck(i)" name="radiogroup" id="Prefered-{{i}}" /> </div> </li>

maybe this code help you and if its not work then share your complete code with me so I can help you

why someone gives me -1? this code helps you to set an individual to radio button value and it's work for me?

Collectives™ on Stack Overflow

Radio button misbeahaving in angular 4 (inside of ngFor)

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Related