Angular 9响应式表单复选框绑定与初始化选中异常问题

你遇到的问题其实是对patchValue的用法理解有点偏差啦～ 咱们先搞清楚为什么原来的this.fc.rules.patchValue([1,3])会选中前两个选项：

你的rules是一个FormArray，里面每个控件都是布尔类型的FormControl（初始值都是false）。当你用patchValue([1,3])时，Angular会把数组里的每个元素转换成布尔值——1和3都是“真值”，所以前两个控件会被设为true，后面的还是false，自然就选中前两个了，这和你想要的选第1、3个完全不是一回事。

正确的解决思路 #

我们需要生成一个和businessrules长度一致的布尔数组，把你想选中的选项对应的索引位置设为true，其他设为false，再用这个数组去更新FormArray。

具体代码修改 #

首先，先定义你要默认选中的选项索引（注意Angular的*ngFor索引是从0开始的，第1个对应索引0，第3个对应索引2）：

// 在组件类里定义要选中的索引
private selectedRuleIndexes = [0, 2];

然后有两种方式实现：

方式一：初始化FormControl时直接设默认值

修改你的addCheckboxes方法，在创建每个FormControl的时候就判断当前索引是否在选中列表里：

private addCheckboxes() {
  this.businessrules.forEach((_, index) => {
    // 判断当前索引是否需要选中
    const isSelected = this.selectedRuleIndexes.includes(index);
    this.rulesFormArray.push(new FormControl(isSelected));
  });
}

方式二：初始化后用patchValue设置

如果不想修改初始化逻辑，也可以在addCheckboxes之后单独设置默认选中：

ngOnInit(): void {
  this.initFCForm();
  this.addCheckboxes();
  // 新增这一步设置默认选中
  this.setDefaultSelectedRules();
}

private setDefaultSelectedRules() {
  // 生成对应长度的布尔数组
  const defaultValues = this.businessrules.map((_, index) => 
    this.selectedRuleIndexes.includes(index)
  );
  // 用patchValue更新FormArray
  this.rulesFormArray.patchValue(defaultValues);
}

这样页面加载完成后，第1个和第3个复选框就会被正确选中啦～

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