Angular表单中绑定ngModel的单选框使用[checked]无法预选中问题

你在模板驱动表单中同时使用了ngModel和[checked]属性，Angular的ngModel会接管表单控件的选中状态，你自定义的[checked]判断会被覆盖，所以预选中逻辑不生效。

• 第一步：修改app.component.ts代码，声明ngModel绑定的变量，并在获取到editableData后给变量赋值

// app.component.ts
export class AppComponent {
  // 声明和单选框绑定的变量
  selectedTransport: string = '';
  // 你的已有变量
  editableData: any = {
    transport: '' // 实际场景中该值一般从接口或其他业务逻辑处获取
  };

  // 在你获取到editableData的逻辑处赋值，比如接口请求回调、ngOnInit生命周期中
  ngOnInit() {
    // 此处为模拟获取editableData的逻辑，实际替换为你自己的业务代码即可
    // this.editableData = 接口返回的业务数据;
    
    // 根据editableData给单选框绑定变量赋值
    if (this.editableData.transport.includes('cab')) {
      this.selectedTransport = 'cab';
    } else if (this.editableData.transport.includes('own')) {
      this.selectedTransport = 'own';
    }
  }
}

• 第二步：修改app.component.html代码，删除所有[checked]属性，把ngModel改成双向绑定写法

<form #office="ngForm">
  <div class="form-group pointer">
    <label for="Shift" class="font-weight-bold fs-6">Tansport <span class="text-danger">*</span></label><br>
    <div class="form-check form-check-inline">
      <input class="form-check-input pointer" type="radio" [(ngModel)]="selectedTransport" name="transport" id="transport-1" value="cab">
      <label class="form-check-label" for="transport-1">Cab</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input pointer" type="radio" [(ngModel)]="selectedTransport" name="transport" id="transport-2" value="own">
      <label class="form-check-label" for="transport-2" >Own</label>
    </div>
  </div>
</form>

• 要确保赋值selectedTransport的时机在editableData拿到有效值之后，如果你是异步请求获取editableData，要在请求成功的回调里执行赋值逻辑，不要提前赋值
• 同一组单选框的name属性必须完全一致，你当前代码的name="transport"已经满足要求，不需要修改

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