Angular表单单选按钮默认选中失效及刷新后未选中问题排查

咱们来拆解一下你的代码里导致默认选中不生效的关键问题，然后一步步修复：

问题根源 #

1. ngModel与[checked]冲突：Angular的ngModel会完全接管表单控件的状态，手动添加[checked]属性会被ngModel覆盖，两者不能同时使用。
2. 类型不匹配的判断条件：你在组件里把selectedPartnerIndex赋值为this.partners[0]（一个对象），但模板里却用它和数字索引i做比较（selectedPartnerIndex === i），对象和数字永远不可能相等，所以[checked]的条件永远为false，第一个单选框自然不会被选中。
3. ID重复问题：所有单选按钮的id都是partnerSelection，这会导致<label>的关联失效，点击其他标签时无法选中对应的单选框。
4. 拼写错误：组件里的getParrtnership和setParrtnership多了一个字母r（应该是getPartnership/setPartnership），这可能导致无法正确读取/保存数据，进而影响默认选中逻辑。

修复方案（推荐绑定对象的方式） #

1. 修改模板代码 #

去掉[checked]，改用双向绑定[(ngModel)]关联选中的合作伙伴对象，同时确保每个单选按钮的id唯一：

<form #personalForm="ngForm" class="editForm" novalidate>
  <div class="mainDiv">
    <div>Select the type of Partner and click "Next"</div>
    <div *ngFor='let partner of partners; let i = index' class="radio">
      <label for="partnerSelection-{{i}}">
        <input [(ngModel)]="selectedPartner" name="partnerSelection" id='partnerSelection-{{i}}' type="radio" [value]="partner">
        {{ partner.partnerType }}
      </label>
    </div>
  </div>
  <div class="form-group text-center">
    <button class="btn btn-success btn-outline-rounded btn-info" [disabled]="!personalForm.valid" (click)="goToNext(personalForm)">
      Next <span style="margin-left:10px;" class="glyphicon glyphicon-arrow-right"></span>
    </button>
  </div>
</form>

2. 修改组件代码 #

调整变量类型，修正拼写错误，确保默认选中第一个合作伙伴：

// 定义选中的合作伙伴对象（建议替换成你的Partner类型）
selectedPartner: any;

ngOnInit() {
  // 读取保存的合作伙伴数据，修正拼写错误
  const savedPartner = this.formDataService.getPartnership();
  // 如果没有保存的数据，默认选中第一个合作伙伴
  this.selectedPartner = savedPartner?.partnerId != null ? savedPartner : this.partners[0];
  console.log('Personal feature loaded!', this.selectedPartner);
}

save(form: any): boolean {
  if (!form.valid) {
    return false;
  }
  // 保存选中的合作伙伴对象，修正拼写错误
  this.formDataService.setPartnership(this.selectedPartner);
  return true;
}

goToNext(form: any) {
  if (this.save(form)) {
    this.router.navigate(['/headquarter']);
  }
}

备选方案（用索引管理选中状态） #

如果你更倾向于用索引来控制选中状态，可以这样修改：

模板代码 #

<div *ngFor='let partner of partners; let i = index' class="radio">
  <label for="partnerSelection-{{i}}">
    <input [(ngModel)]="selectedPartnerIndex" name="partnerSelection" id='partnerSelection-{{i}}' type="radio" [value]="i">
    {{ partner.partnerType }}
  </label>
</div>

组件代码 #

selectedPartnerIndex: number;

ngOnInit() {
  const savedPartner = this.formDataService.getPartnership();
  // 如果有保存的合作伙伴，找到对应的索引；否则默认选中第一个（索引0）
  this.selectedPartnerIndex = savedPartner?.partnerId != null 
    ? this.partners.findIndex(p => p.partnerId === savedPartner.partnerId) 
    : 0;
  console.log('Personal feature loaded!', this.selectedPartnerIndex);
}

save(form: any): boolean {
  if (!form.valid) {
    return false;
  }
  // 通过索引获取选中的合作伙伴对象并保存
  this.formDataService.setPartnership(this.partners[this.selectedPartnerIndex]);
  return true;
}

关键注意点 #

• 永远不要同时使用ngModel和[checked]，Angular表单会优先使用ngModel的状态，手动设置的[checked]会被忽略。
• 确保表单控件的id唯一，否则<label>无法正确关联对应的控件，影响交互体验。
• 检查代码中的拼写错误，这类小问题很容易导致数据逻辑失效。

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