Angular Material mat-radio-button gives wrong value

1
votes

I am trying to use angular material mar-radio-button to select between true and false. I have set default value but when I click on other radio button, it gives the value of the default selected value. My Html enter image description here

Component

enter image description here

So the value of the false is automatically set and if I select value of true it still prints out false.

I am using 

console.log(this.shippingForm.get('signatureReq').value) to print out the value.
2
angularangular-material
Check console to see if you're getting this error: Error: formGroupName must be used with a parent formGroup directive. You'll want to add a formGroup Also, if possible, please consider creating a stackblitz. – SiddAjmera
Could you hover over those underlined marks and tell us what the errors are? – Edric

2 Answers

0
votes

Use this way

<form [formGroup]="shippingForm">
     <mat-radio-group formControlName="signatureReq" (change)="changeRadioValue()">
         <mat-radio-button [value]=true>Option 1</mat-radio-button>
         <mat-radio-button [value]=false>Option 2</mat-radio-button>
    </mat-radio-group>

In your typescript

this.shippingForm = this.fb.group({
  signatureReq: [false],
})

if you are using [value]="'true'" it takes value as a string not a boolean. So use [value]=true.

Stackblitz demo

-1
votes

I guess this is what you want to achieve.

In your HTML change it as follows:

<mat-radio-group formControlName="signatureReq" (change)="changeRadioValue()">
    <mat-radio-button [value]="'true'">Option 1</mat-radio-button>
    <mat-radio-button [value]="'false'">Option 2</mat-radio-button>
</mat-radio-group>

The value of signatureReq is updated when you click on an option.

See Stackblitz for Demo.