CODEWITHSUNDEEP
angularangular-material2
User2786
User2786

Reputation: 141

Unable to select only one radio button at a time using angular material 2

I am using angular material 2 for creating an UI.

I am trying to display the list of radio buttons by using the data coming from the backend. What property should I add in order to make sure that only one radio button gets selected at a time?

Here is my code

 <div class="col-md-12" style="margin: 20px 0px;">
     <div class="col-md-4 clearfix" *ngFor="let content of contents" style="margin-top: 10px;">
         <mat-card>
             <div style="display: inline-block; margin-right: 10px;">
                 <button class="mat-mini-fab mat-primary avatar">
                     <mat-icon>slideshow</mat-icon>
                 </button>
             </div>
             <div style="display: inline-block" >
                 <mat-radio-group >
                     <mat-radio-button color="primary" [value]="content">{{content.name}} </mat-radio-button>
                 </mat-radio-group>
             </div>
         </mat-card>
     </div>
 </div>

Upvotes: 2

Views: 6716

Answers (3)

Awais
Awais

Reputation: 4902

This solved my problem (same/common name of both group as we do in HTML) name="what_ever_you_want"

<div class="question">
  <mat-radio-group class="custom-radio-group" aria-label="Select an option" name="single_img_radio">
    <mat-radio-button color="primary" value="yes">Yes</mat-radio-button>
  </mat-radio-group>
</div>

<div class="question">
  <mat-radio-group class="custom-radio-group" aria-label="Select an option" name="single_img_radio">
    <mat-radio-button color="primary" value="no">No</mat-radio-button>
  </mat-radio-group>
</div>

Upvotes: 4

G. Tranter
G. Tranter

Reputation: 17918

The purpose of a radio group is to provide control over all of the radio buttons. The group will only allow one radio button to be selected at any one time even without having a data model object. In your code, each radio button has its own radio group, so it was possible to select all of the radio buttons because each button belonged to a different group. Binding all of the radio groups to the same model does fix your problem, but it isn't the right way to use a radio group. Your code should look more like this:

<mat-radio-group [(ngModel)]="favoriteSeason">
    <div class="col-md-12" style="margin: 20px 0px;">
        <div class="col-md-4 clearfix" *ngFor="let season of seasons" style="margin-top: 10px;">
            <mat-card>
                <div style="display: inline-block; margin-right: 10px;">
                    <button class="mat-mini-fab mat-primary avatar">
                        <mat-icon>{{season.icon}}</mat-icon>
                    </button>
                </div>
                <div style="display: inline-block">
                    <mat-radio-button color="primary" [value]="season.name">{{season.name}}</mat-radio-button>
                </div>
            </mat-card>
        </div>
    </div>
</mat-radio-group>

Edit: The main point is that all of the radio buttons need to be inside a single radio group.

Upvotes: 2

User2786
User2786

Reputation: 141

I have found the answer . It can be done by using two-way binding. I have added [(ngModel)]="selectedContent (this can be any name)" inorder to solve the issue.

 <mat-radio-group  [(ngModel)]="selectedContent">
       <mat-radio-button color="primary" [value]="content">{{content.name}}</mat-radio-button>
  </mat-radio-group>

Upvotes: 0

Related Questions