Reputation: 97
I am having trouble in controlling the behavior of multiple radio select in multiple for loop.
In below demo, when I check radio of 1st block it is selecting the same radio in 2nd block too. Please have a look. Actually I need to select different radio option in different blocks.
demo: http://plnkr.co/edit/YpQZyv55tKxTGwDEi5gS?p=preview
Upvotes: 1
Views: 417
Reputation: 790
Change in template
<div *ngFor="let a of abc; let i = index" >
<p>{{a}}</p>
<div *ngFor="let enum of enum_details; let e = index">
<label for="enum{{i+1}}{{e + 1}}">
<input id="enum{{i+1}}{{e+1}}" [value]='enum.name' type="radio" name="enums{{i+1}}{{e+1}}" [(ngModel)]="radioSelected[i]">
{{enum.name}}
</label>
</div>
</div>
and change in component
radioSelected:string[] = []
At now you got you value in radioSelected array (radioSelected[0] for first radio bloc and radioSelected[ 1] for second block)
Upvotes: 1
Reputation: 6063
You have to change name
of your input
based on parent index
and child index.
Example : name="enums{{i+1}}{{e+1}}"
Then you need to create a dynamic model based on parent index
Example : radioSelected[i]
And replace radioSelected:any;
by radioSelected:string[] = [];
in your component.
So use following code in your template,
<input id="enum{{i+1}}{{e+1}}" [value]='enum.name' type="radio" name="enums{{i+1}}{{e+1}}" [(ngModel)]="radioSelected[i]">
You will get your input selected value in radioSelected[index]
Where index
will be 0..n
.
Example: If you have selected value of hello
loop is Kumar
then you will access this.radioSelected[0]
in your component to get this value.
Hopes this will help you !!
Upvotes: 1