Angular：如何在材质中的 2 个单选组之间选择 2 个单选按钮？答案

【问题标题】：Angular: How to Select 2 Radio Buttons between 2 Radio Groups in Material?Angular：如何在材质中的 2 个单选组之间选择 2 个单选按钮？
【发布时间】：2022-02-07 08:17:36
【问题描述】：

这是我的组件形式：

<div class="col-3 col-sm-3 col-md-3 mb-2">
    <mat-radio-group aria-label="Select an option" formControlName="gender">
        <mat-radio-button [value]="true" [checked]="false" name="male">Male</mat-radio-button>
        <mat-radio-button [value]="false" [checked]="false" name="famale">Famale</mat-radio-button>
    </mat-radio-group>
    <mat-radio-group aria-label="Select an option" formControlName="name">
        <mat-radio-button [value]="false" [checked]="false"  name="benjamin">Benjamin</mat-radio-button>
        <mat-radio-button [value]="true" [checked]="false"  name="sarah">Sarah</mat-radio-button>
    </mat-radio-group>
</div>

我想实现这样的目标：

即如果我选择性别，则应自动选择引用当前所选性别的名称。

【问题讨论】：

标签： javascript html angular angular-material

【解决方案1】：

<div class="col-3 col-sm-3 col-md-3 mb-2">
    <mat-radio-group aria-label="Select an option" formControlName="gender">
        <mat-radio-button [value]="true" [checked]="false" name="male">Male</mat-radio-button>
        <mat-radio-button [value]="false" [checked]="false" name="famale">Famale</mat-radio-button>
    </mat-radio-group>
    <mat-radio-group aria-label="Select an option" formControlName="name">
        <mat-radio-button [value]="true" [checked]="form.controls['gender'].value === true" name="benjamin">Benjamin</mat-radio-button>
        <mat-radio-button [value]="false" [checked]="form.controls['gender'].value === false" name="sarah">Sarah</mat-radio-button>
    </mat-radio-group>
</div>

【讨论】：

我们不应该同时使用checked和formControlName（当我们使用formControlName时，是使radio被选中的FormControl的值）。所以正确的是删除第一个 mat-radio-group 中的 [checked] 和第二个 mat-radio-group 中的 formControlName。是的，有一个 FormControl“名称”是不必要的——总是得到与 FormControl“性别”相同的值——
你能在stackblitz.com上给我看一个活生生的例子吗