Multiple mat-radio-button selected in mat-radio-group

Question

`<mat-radio-group [ngClass]="cssForGroup" name="test">
      <mat-radio-button *ngFor="let option of options | filter:searchText" 
                class="cssForRow"
                [value]="option" 
                [checked]="option.isSelected"
                (change)="selectOption($event)">         
                        {{ option.value }}
                        <div class="info" [hidden]="!option.info">{{option.info}}</div>
            </mat-radio-button>
 </mat-radio-group>`

This the code I have for Radio buttons in a Group using angular material where option is an object. I have an issue where the option.value can be same for multiple options but the option.info is different. But when I select a radio button of such a case. All the buttons with the same option.value gets selected on UI.

I have tried adding name attribute to mat-radio-group. I have changed value attribute from an object to a unique key. I tried trackBy in ngFor. These solutions did not fix it.

Can somebody help me fix this?

Eliseo Eliseo · Accepted Answer · 2020-08-12T07:55:00

"I have an issue where the option.value can be same for multiple options but the option.info is different".

Then you can not use a mat-radio-button. futhermore, you've never know what value are you clicked. I must suppose that you has an array of options

//"WRONG" I don't know if you push the first or the last option
options=[{value:1,info:'one'},{value:2,info:'two'},{value:1,info:'one bis'}]

you must use

//"OK", If I choose the first option the value is 101, value%100=1
//      If I choose the last option the value is 201, value%100=1
//         and know that Is the last option
     
optionsValors=[{value:101,info:'one'},{value:102,info:'two'},{value:201,info:'one bis'}]

//or

optionsValors=this.options.map((x,index)=>
     ({value:index*100+x.value,info:x.info}))

Remember use the module operator if you want the "real value"

value=value%100

If your options.value are strings you can make some similar adding a letter and use substr

NOTE: I imagine that you want to store in a variable the value of the options. Rememeber that this is Angular!! so, why not use [(ngModel)]?

<mat-radio-group [ngClass]="cssForGroup" name="test" [(ngModel)]="test">
      <mat-radio-button *ngFor="let option of options | filter:searchText" 
                class="cssForRow"
                [value]="option" >         
                        {{ option.value }}
                 <div class="info" [hidden]="!option.info">{{option.info}}</div>
       </mat-radio-button>
 </mat-radio-group>

Multiple mat-radio-button selected in mat-radio-group

2 Answers