Angular Material - passing value to radio group

Question

Why passing the value to mat-radio-group doesn't work? Any of these two buttons is checked. But if I explicitly use value="2" in mat-radio-group everything works fine.

TS inside class

 radioValue = 2;

HTML

<mat-radio-group [value]="radioValue">
        <mat-radio-button class="mr-2" value="1">Male</mat-radio-button>
        <mat-radio-button value="2">Female</mat-radio-button>
    </mat-radio-group>

use [(ngModel)], not value (or [ngModel] if you only want "one-way" binding — Eliseo
– Eliseo, Commented Jan 3, 2020 at 7:42

uminder · Accepted Answer · 2020-01-03 07:51:05Z

1

The problem is related to the data type, you're merging string and number. Change your template as follows (also use [value] with mat-radio-button):

<mat-radio-group [value]="radioValue">
    <mat-radio-button class="mr-2" [value]="1">Male</mat-radio-button>
    <mat-radio-button [value]="2">Female</mat-radio-button>
</mat-radio-group>

answered Jan 3, 2020 at 7:51

uminder

26.4k6 gold badges45 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material - passing value to radio group

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related