CODEWITHSUNDEEP
angular
madhu Goud
madhu Goud

Reputation: 127

Radio button misbeahaving in angular 4 (inside of ngFor)

<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

Upvotes: 1

Views: 5424

Answers (5)

itzhar
itzhar

Reputation: 13031

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);"

Upvotes: 0

mittal bhatt
mittal bhatt

Reputation: 1009

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}}"

Upvotes: 1

Sanoj_V
Sanoj_V

Reputation: 2986

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.

Upvotes: 1

user4676340
user4676340

Reputation:

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>

Upvotes: 0

bhaumik shah
bhaumik shah

Reputation: 206

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

Upvotes: -1

Related Questions