I need dynamic number of radio buttons based on the length of Array Of Objects (eg: enum_details):
Following is the code I tried:
<div *ngFor="let enum of enum_details">
<label for="enum_answer_{{enum.value}}">
<input id="enum_answer_{{enum.value}}" type="radio" name="enums" [(ngModel)]="enum.value">
{{enum.display_text}}
</label>
</div>
But, when I click any radio, always the last one gets selected and the value is never assigned to ngModel.
If I remove ngModel, the radios work fine, but, value is not set. What can be the fix here?
use your code like this
<div *ngFor="let enum of enum_details">
<label for="enum_answer_{{enum.name}}">
<input id="enum_answer_{{enum.name}}" [value]='enum.name' type="radio" name="enums" [(ngModel)]="radioSelected">
{{enum.name}}
</label>
</div>
<button (click)='radioFun()'>Checked value of radio button</button>
Try something like this.
<div class="radio" *ngFor="let key of enum_details">
<label>
<input type="radio" name="keys_on_hand" [value]="key.value" [(ngModel)]="key.value">
{{key.display}}
</label>
</div>
You can use with form control like this.
<div class="form-check form-check-inline pl-0" *ngFor="let class of classList>
<input class="form-check-input" id="enum_answer_{{class.type}}" [value]='class.type' name="type" type="radio" formControlName="type">
<label class="form-check-label" for="enum_answer_{{class.type}}">{{class.type}}</label>
</div>