Reputation: 7263
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
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>
Upvotes: 1