角材料垫单选按钮给出错误的值

Question

我正在尝试使用角度材质的mar-radio按钮在true和false之间进行选择。 我已经设置了默认值，但是当我单击其他单选按钮时，它给出了默认选定值的值。 我的HTML

组件

所以false的值会自动设置，如果我选择true，它仍然会打印出false。

我正在使用

console.log(this.shippingForm.get('signatureReq').value) to print out the value.

Answer 1

我想这就是您想要实现的。

在您的HTML中进行如下更改：

<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>

signatureReq 的值在您单击选项时更新。

有关演示，请参见Stackblitz。

Answer 2

使用这种方式

<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>

在打字稿中

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

如果您使用[value]="'true'"，则它将值作为字符串而不是布尔值。因此，请使用[value]=true。

Stackblitz demo