CODEWITHSUNDEEP
angulartypescript
onTheInternet
onTheInternet

Reputation: 7263

Angular Material Radio Buttons not behaving properly

I'm seeing a weird result where I can't properly select certain options of radio buttons in my angular project. Once you select an option for the radio button, you can't change your mind to the other option

I'm trying to build a questionnaire form and figured *ngFor was a perfect use case for this.

The typescript has an array of strings that are place holders for the questions for now. 

export class AppComponent { 
    questions = [
    'Question 1',
    'Question 2',
    'Question 3',
    'Question 4'
  ];
}

And the front end is also pretty straight forward

<mat-radio-group *ngFor="let question of questions">
  <label for="">{{ question }}</label>
  <mat-radio-button value="">True</mat-radio-button>
  <mat-radio-button value="">False</mat-radio-button>
</mat-radio-group>

And here is a link to a stackblitz where I've recreated the issue.

Upvotes: 0

Views: 1601

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222657

It happens because you do not have any value set. You need to set it as 

 <mat-radio-button value="true">True</mat-radio-button>
 <mat-radio-button value="false">False</mat-radio-button>

DEMO

Upvotes: 1

Related Questions