Angular中Radio Button可同时选中问题求助

问题根源 #

单选按钮实现互斥的核心要求是：同一组的所有单选按钮必须拥有相同的name属性。你当前的代码中，循环生成的每个radio没有设置统一的name，浏览器会将它们视为独立选项，因此可以同时选中。

解决方案 #

方案1：添加统一的name属性（原生方式） #

直接给循环中的radio标签添加name="gender"，让它们归为同一组：

<div class="radio" *ngFor="let gender of genders">
  <label> <input type="radio" name="gender" [value]="gender" />{{ gender }} </label>
</div>

方案2：结合Angular模板驱动表单（推荐） #

使用Angular的ngModel绑定，既能实现互斥，还能方便在组件中获取选中值，同时规范表单结构：

修改后的完整代码：

<div class="container">
  <div class="row">
    <form #form="ngForm">
      <div class="form-group">
        <label>username</label>
        <br />
        <input type="text" class="form-control" name="username" ngModel />
      </div>
      <div class="form-group">
        <label>email</label>
        <br />
        <input type="email" class="form-control" name="email" ngModel />
      </div>
      <div class="form-group">
        <label>secret question</label>
        <br />
        <!-- 修正错误：select标签不需要type="radio"属性 -->
        <select class="form-control" name="secretQuestion" ngModel>
          <option value="pet">your fav. pet?</option>
          <option value="teacher">your fav. teacher?</option>
        </select>
      </div>
      <div class="form-group">
        <textarea cols="60" rows="5" name="reply" ngModel></textarea>
      </div>
      <div>
        <p style="margin: 10px">your reply:</p>
      </div>
      <div class="radio" *ngFor="let gender of genders">
        <label> 
          <input type="radio" name="gender" [value]="gender" ngModel />
          {{ gender }} 
        </label>
      </div>
      <button type="submit" style="margin-left: 10px">submit</button>
    </form>
  </div>
</div>

额外修正 #

你代码中的select标签错误添加了type="radio"属性，这是无效的，需要删除，否则可能导致表单控件渲染异常。

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