Angular中点击表单取消按钮后Mat Checkbox未清空问题

在Angular项目中，表单内的城市复选框列表点击取消按钮时，已勾选的复选框无法自动清空，但手动逐个取消勾选功能正常。

现有代码片段 #

api-model.ts

export interface City{
  city_Name: string;
}

class-model.ts

export class eModel {
     cityList: Array<City>=[];
    }

app.html

<div class="row">
                <div class="column-3">
                  <div *ngFor="let data of cityData; let i=index">
                    <mat-checkbox color="primary"  (change)="getCheckboxValues(data, i, $event)" >
                      &nbsp; {{data.city_Name}}
                    </mat-checkbox>
                  </div>
                </div>
</div>


 <button mat-raised-button class="cancel-button" (click)="Cancel()">Cancel</button>

app.ts

cityData: City[] = [];

 ngOnInit(): void {
 this.eModel.cityList = [];
loadCityList();

}
loadCityList() {
    return this._getAPIservice.getCity().subscribe(data => {
      this.cityData = data;
 });
  }
Cancel(): void {
 this.eForm.resetForm({});
 loadCityList();
 this.eModel.cityList = [];
}

问题根源 #

当前mat-checkbox仅通过(change)事件更新eModel.cityList，但复选框的选中状态未与任何变量绑定，导致取消按钮清空eModel.cityList后，复选框的UI状态无法同步更新。此外Cancel方法中重复调用loadCityList属于冗余操作，会额外发起API请求。

修复方案 #

方案一：维护选中状态集合（简单直接）

1. 组件内添加选中状态跟踪
   在app.ts中新增集合存储选中的城市名称：

// app.ts
selectedCities = new Set<string>(); // 跟踪选中的城市名称

2. 修改复选框绑定逻辑
   更新app.html中的mat-checkbox，绑定选中状态并调整事件处理：

<!-- app.html -->
<div class="row">
  <div class="column-3">
    <div *ngFor="let data of cityData; let i=index">
      <mat-checkbox 
        color="primary" 
        [checked]="selectedCities.has(data.city_Name)"
        (change)="onCityCheckboxChange(data, $event)"
      >
        &nbsp; {{data.city_Name}}
      </mat-checkbox>
    </div>
  </div>
</div>

<button mat-raised-button class="cancel-button" (click)="Cancel()">Cancel</button>

3. 更新事件处理与取消方法
   在app.ts中实现复选框事件逻辑，并简化取消操作：

// app.ts
// 替换原getCheckboxValues方法
onCityCheckboxChange(city: City, event: MatCheckboxChange) {
  if (event.checked) {
    this.selectedCities.add(city.city_Name);
    this.eModel.cityList.push(city);
  } else {
    this.selectedCities.delete(city.city_Name);
    this.eModel.cityList = this.eModel.cityList.filter(item => item.city_Name !== city.city_Name);
  }
}

Cancel(): void {
  this.eForm.resetForm({});
  this.selectedCities.clear(); // 清空选中集合，同步更新复选框UI
  this.eModel.cityList = [];
  // 移除loadCityList调用，避免重复请求
}

方案二：使用FormArray绑定（符合Angular表单规范）

如果采用响应式表单，可通过FormArray统一管理复选框状态：

1. 初始化表单数组

// app.ts
import { FormBuilder, FormArray } from '@angular/forms';

constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  this.eModel.cityList = [];
  // 初始化表单，包含cities数组控件
  this.eForm = this.fb.group({
    cities: this.fb.array([])
  });
  this.loadCityList();
}

// 快捷获取cities表单数组
get citiesFormArray() {
  return this.eForm.get('cities') as FormArray;
}

loadCityList() {
  return this._getAPIservice.getCity().subscribe(data => {
    this.cityData = data;
    // 为每个城市添加表单控件
    const cityControls = data.map(() => this.fb.control(false));
    this.citiesFormArray.clear();
    cityControls.forEach(control => this.citiesFormArray.push(control));
  });
}

// 可选：同步更新eModel.cityList
syncSelectedCities() {
  this.eModel.cityList = this.cityData.filter((_, index) => 
    this.citiesFormArray.at(index).value
  );
}

2. 修改HTML绑定

<!-- app.html -->
<div class="row">
  <div class="column-3">
    <div *ngFor="let data of cityData; let i=index">
      <mat-checkbox 
        color="primary" 
        [formControl]="citiesFormArray.at(i)"
        (change)="syncSelectedCities()"
      >
        &nbsp; {{data.city_Name}}
      </mat-checkbox>
    </div>
  </div>
</div>

3. 简化取消方法

// app.ts
Cancel(): void {
  this.eForm.resetForm(); // 重置表单自动清空所有复选框
  this.eModel.cityList = [];
}

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