Angular 4更新表单中如何回显已选中的复选框？

你在Angular更新表单里遇到的复选框回显问题很常见，输入框用[value]绑定能正常显示历史值，但复选框的选中状态不知道怎么处理对吧？我给你整理几个实用的解决方案：

1. 用[(ngModel)]双向绑定（最省心的方式） #

如果你的表单不是响应式表单，双向绑定是最直接的方案。你可以把复选框的选中状态和酒店对象的visited属性直接绑定，同时还能保留你的changeValue方法处理额外逻辑：

<div *ngFor="let hotel of hotels" class="form-group">
  <h4>{{hotel.name}}</h4>
  <label class="custom-control custom-checkbox">
    <input 
      type="checkbox" 
      class="custom-control-input"
      [(ngModel)]="hotel.visited"
      (change)="changeValue(hotel)"  <!-- 保留你的自定义逻辑 -->
    >
    <span class="custom-control-label">已访问</span>
  </label>
</div>

这样一来，当hotel.visited为true时，复选框会自动选中；用户勾选/取消时，hotel.visited的值也会同步更新，完美实现回显和状态同步。

2. 响应式表单场景的处理 #

如果你的项目用了Angular响应式表单，那得把复选框绑定到表单控件上。假设你的表单组是updateForm，里面有一个visitedHotels的FormArray用来存储选中的酒店ID：

先在组件类里初始化表单：

updateForm = this.fb.group({
  visitedHotels: this.fb.array([])
});

// 页面初始化时，把已访问酒店的ID填充到FormArray
ngOnInit() {
  const visitedHotelIds = this.hotels.filter(h => h.visited).map(h => h.id);
  visitedHotelIds.forEach(id => {
    (this.updateForm.get('visitedHotels') as FormArray).push(this.fb.control(id));
  });
}

然后模板里这样绑定：

<div *ngFor="let hotel of hotels; let i = index" class="form-group">
  <h4>{{hotel.name}}</h4>
  <label class="custom-control custom-checkbox">
    <input 
      type="checkbox" 
      class="custom-control-input"
      formArrayName="visitedHotels"
      [formControlName]="i"
      [value]="hotel.id"
    >
    <span class="custom-control-label">已访问</span>
  </label>
</div>

这种方式更适合复杂表单场景，能更好地跟踪表单状态和做验证。

3. 手动绑定checked属性（无双向绑定需求时） #

如果你不想用双向绑定，也可以手动绑定checked属性，同时在change事件里更新visited值：

<div *ngFor="let hotel of hotels" class="form-group">
  <h4>{{hotel.name}}</h4>
  <label class="custom-control custom-checkbox">
    <input 
      type="checkbox" 
      class="custom-control-input"
      [checked]="hotel.visited"
      (change)="changeValue(hotel, $event.target.checked)"
    >
    <span class="custom-control-label">已访问</span>
  </label>
</div>

然后修改你的changeValue方法，接收复选框的状态：

changeValue(hotel: any, isChecked: boolean) {
  hotel.visited = isChecked;
  // 这里可以添加其他逻辑，比如调用接口更新后端数据等
}

这样[checked]="hotel.visited"会根据属性值自动设置复选框的选中状态，也能实现回显效果。

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