ngModel radio buton miss behaving

Question

I am having issues with radio button with ngModel when I am populating with ngFor

Radio button selection is misbehaving
In the console.log of Form, i see the value of gender is "it"

What am I doing wrong Here is my code

app.component.ts 

gender :string[] = ["Male", "Female"];

app.component.html

<div class="radio" *ngFor="let it of gender">
   <label><input ngModel type="radio" name="gen"  value="it">{{it}}</label>
</div>

Kindly donot post images of code. – Prabhjot Singh Kainth Dec 12 '19 at 05:52 — Prabhjot Singh Kainth, Dec 12 '19 at 05:52

score 0 · Answer 1 · answered Dec 12 '19 at 05:54

I found the answer after playing around, issue is with the 'value' of radio button, it has to be property binded

<div class="radio" *ngFor="let it of gender">
   <label><input ngModel type="radio" name="gen"  [value]="it">{{it}}</label>
</div>

or

<div class="radio" *ngFor="let it of gender">
   <label><input ngModel type="radio" name="gen"  value={{it}}>{{it}}</label>
</div>

ngModel radio buton miss behaving

1 Answers1