Angular中FormArray迭代行的单选组默认值选择实现问题

API 探路者

2026-9-25

你当前的实现缺少统一的单选组容器，导致所有单选按钮独立不互斥，同时没有绑定值和选中状态逻辑，按以下步骤修改即可：

实现方案

1. 核心逻辑调整

你表单里已经定义了全局的defaultAPN字段，直接用该字段存储选中的默认APN即可，无需在每个APN子项中单独维护isDefault状态（如果有回显需求可以保留该字段，仅做初始化赋值用），能避免频繁遍历修改子项状态的冗余操作。

2. 模板代码修改

把单选组容器包裹在整个FormArray外层，让所有迭代生成的单选按钮属于同一互斥组，同时增加未勾选条目单选按钮禁用的逻辑：

<!-- 单选组绑定全局defaultAPN控件 -->
<mat-radio-group formControlName="defaultAPN">
  <ng-container formArrayName="APNList">
    <ng-container *ngFor="let APNRow of APNList.controls; let i = index">
      <div fxFlex fxLayout="row" fxLayoutAlign="start start"  fxLayoutGap="4px grid">
        <ng-container [formGroupName]="i">
          <div fxFlex="110px">
            <mat-checkbox formControlName="isSelected">
              {{ APNRow.value.apn }}
            </mat-checkbox>
          </div>
          <div fxFlex="80px">
            <!-- 单选按钮值绑定当前行apn，未勾选时禁用 -->
            <mat-radio-button 
              [value]="APNRow.value.apn"
              [disabled]="!APNRow.value.isSelected"
            >
            </mat-radio-button>
          </div>
        </ng-container>
      </div>
    </ng-container>
  </ng-container>
</mat-radio-group>

3. 可选补充逻辑

取消勾选已设为默认的APN时自动清空默认值：可以给mat-checkbox加(change)事件，判断如果当前取消勾选的APN等于defaultAPN的值，就重置defaultAPN控件。
如果需要保持子项isDefault字段同步，可订阅defaultAPN的值变化，遍历APNList的所有子项，将匹配对应APN的子项isDefault设为true，其余设为false。
数据回显时，只需要把之前保存的默认APN值赋值给defaultAPN控件，单选组会自动选中对应项。