Question

我有一个包含两个单选按钮的 Angular Material 单选按钮组。我正在使用 Reactive Forms 并希望预选第一个值为“true”的单选按钮。

我将关联的 FormControl 的值初始化为 FormGroup 的一部分，如下所示：

userFormGroup = new FormGroup({
  orgType: new FormControl(true),
  ...
})

我通过在无线电组下方添加此代码来验证该值是否设置为 true： <p>orgTypeBool value: {{userFormGroup.get('orgType').value}}</p>。该值确实返回“true”。

我尝试使用材料单选按钮文档中提到的所选输入装饰器预选第一个单选按钮：https://material.angular.io/components/radio/api#MatRadioGroup。当我尝试时，我收到以下错误：TypeError: Cannot create property 'checked' on boolean 'true'.

这是我的代码：

<mat-radio-group formControlName="orgTypeBool" [selected]="userFormGroup.get('orgType').value" (change)="controlChange()">
    <mat-radio-button id="nonprofit" value="true">Non-Profit</mat-radio-button>
    <mat-radio-button id="commerical" value="false">Commerical</mat-radio-button>
</mat-radio-group>
<p>orgTypeBool value: {{userFormGroup.get('orgType').value}}</p>

我认为有一种使用 [selected] 的方法，但我不知道正确的语法是什么。我将如何根据 FormControl 的值预先选择第一个单选按钮？

Answer 1

我找到了解决方案。不确定这是否是最佳做法。

我在第一个单选按钮中添加了一个选中的 Input 装饰器并将其设置为“true”。

<mat-radio-group formControlName="orgTypeBool" (change)="controlChange()">
    <mat-radio-button id="nonprofit" value="true" [checked]="true">Non-Profit</mat-radio-button>
    <mat-radio-button id="commerical" value="false">Commerical</mat-radio-button>
</mat-radio-group>

使用反应形式预选材料单选按钮不起作用

1 个答案: