如何在Angular中将select下拉选项修改为radio button单选按钮

核心原因 #

<select> 元素的 <option> 子标签本身不支持 type 属性，添加 type="radio" 没有任何效果，要实现单选按钮组需要直接使用 <input type="radio"> 元素构建。

修改后的代码（适配你现有响应式表单逻辑） #

<div class="form-group">
  <div style="display:flex; flex-direction: row; align-items: center; gap: 16px;">
    <label for="role">Select Role<span class="text-danger pl-1">*</span></label>
    <div style="display: flex; gap: 24px;">
      <label style="cursor: pointer; display: flex; align-items: center; gap: 4px;">
        <input type="radio" formControlName="role" value="team_maintainer" required>
        Maintainer
      </label>
      <label style="cursor: pointer; display: flex; align-items: center; gap: 4px;">
        <input type="radio" formControlName="role" value="team_viewer" required>
        Viewer
      </label>
    </div>
  </div>
</div>

Angular Material 适配写法 #

你代码中用到了matNativeControl说明项目引入了Angular Material，推荐直接用官方单选组件，样式更统一：

<div class="form-group">
  <div style="display: flex; align-items: center; gap: 16px;">
    <label>Select Role<span class="text-danger pl-1">*</span></label>
    <mat-radio-group formControlName="role" required style="display: flex; gap: 24px;">
      <mat-radio-button value="team_maintainer">Maintainer</mat-radio-button>
      <mat-radio-button value="team_viewer">Viewer</mat-radio-button>
    </mat-radio-group>
  </div>
</div>

补充说明 #

• 同一组单选按钮绑定同一个formControlName即可自动实现互斥选择，无需额外配置相同name属性。
• 如果需要保留原有的"Select the role"默认提示，可以额外添加一个value为空的禁用单选选项。

内容的提问来源于stack exchange，提问作者Bhargavi